0

подскажите, как прокрутить блок, если сама страница не прокручивается. Мне необходимо прокрутить блок(выходящий за родительский блок по высоте), однако событие .scroll() не вызывается на $(window), ибо страницу попросту некуда прокручивать(ибо родительский блок имеет свойство overflow:hidden;)

1
  • Что можно сказать без кода? Попробуйте transfrom: translateY(50%); Commented 25 окт. 2018 в 22:33

2 ответа 2

0

К дочернему элементу 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
  • 1
    Правильней будет указать overflow-x: hidden; overflow-y: scroll, так как нужен скролл по высоте, мало ли...
    – WhyTry
    Commented 26 окт. 2018 в 6:22
0

Оденьте содержимое overflow: hidden в контейнер и дайте ему (контейнеру) overflow: scroll

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.