подскажите, как прокрутить блок, если сама страница не прокручивается.
Мне необходимо прокрутить блок(выходящий за родительский блок по высоте), однако событие .scroll()
не вызывается на $(window)
, ибо страницу попросту некуда прокручивать(ибо родительский блок имеет свойство overflow:hidden;
)
2 ответа
К дочернему элементу p
мы добавляем overflow: scroll;
и указываем высоту в 100%
.container {
height: 100px;
overflow: hidden;
}
.container p {
height: 100%;
overflow: scroll;
}
<div class='container'>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam labore aperiam, quasi ea dolores praesentium facere excepturi vel ex ipsum ullam nisi modi et nam voluptatibus accusantium optio. Magnam, placeat.</span>
<span>Pariatur, nemo at nihil iusto soluta quis vel est quasi maxime iste aliquid laboriosam nobis necessitatibus quisquam, exercitationem sapiente nisi sit odit vitae provident. Sed sit, nobis ratione unde nemo.</span>
<span>Ex, quasi? Voluptatem aperiam culpa necessitatibus iusto molestias fuga placeat unde soluta, nemo quas incidunt illo vel esse dolores, omnis voluptatum sequi nihil nulla reprehenderit doloribus ullam, debitis recusandae assumenda.</span>
<span>Nobis, voluptas provident quia sapiente, voluptatem a. Qui repellendus doloremque ratione dolorem, ipsum eveniet nam magni error, aspernatur in vel, quia omnis. Perspiciatis sapiente dolore iure explicabo quidem illo nisi.</span>
<span>Accusamus alias est quod animi porro quaerat expedita, nesciunt laborum! Consequuntur excepturi, aliquid commodi at rem deserunt natus dignissimos animi maxime sit incidunt culpa sequi distinctio nam sint vel repellat?</span>
<span>Aspernatur pariatur provident non qui illo vitae ea hic reiciendis, tempora quo, iste soluta. Sequi laboriosam ipsam, quidem dolore voluptatum expedita est nisi eveniet quod, debitis placeat nesciunt et. Vero.</span>
<span>Mollitia fugiat, quis a nostrum reiciendis explicabo. Accusantium reprehenderit temporibus aperiam asperiores debitis rem laboriosam dolores sunt commodi ipsum ipsa nam facilis error, mollitia quod voluptates odit quae nostrum, sequi!</span>
<span>Placeat excepturi quae quia, in sapiente! Modi ex harum, facere assumenda velit, quis quas. Maxime amet consectetur sit doloribus dolore officia quae libero quaerat minus beatae ipsum, voluptatem debitis culpa.</span>
<span>Dolorum, quibusdam iusto, eos debitis vel, facilis repellendus, ipsa odio praesentium nulla natus! Rem ipsa odio distinctio, vel, eum necessitatibus, minima, error doloribus sint numquam ut enim laboriosam qui iure.</span>
<span>Vero fugiat dolorum iusto perspiciatis ad qui libero incidunt, harum dicta dolorem deleniti possimus adipisci sequi sapiente. Omnis, vero saepe velit voluptas inventore tempore, ea, eum corrupti necessitatibus consectetur iure!</span>
</p>
</div>
-
1Правильней будет указать
overflow-x: hidden; overflow-y: scroll
, так как нужен скролл по высоте, мало ли...– WhyTryCommented 26 окт. 2018 в 6:22
Оденьте содержимое overflow: hidden в контейнер и дайте ему (контейнеру) overflow: scroll
transfrom: translateY(50%);