tell me how to scroll the block if the page itself does not scroll. I need to scroll the block (beyond the parent block by height), but the .scroll() event is not triggered on $(window) , because the page simply has nowhere to scroll (because the parent block has an overflow:hidden; property overflow:hidden; )

  • What can be said without a code? Try transfrom: translateY(50%); - Alexandr Tovmach

2 answers 2

We add overflow: scroll; to the child element p overflow: scroll; and specify the height of 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>

  • It would be more correct to specify overflow-x: hidden; overflow-y: scroll overflow-x: hidden; overflow-y: scroll , because you need to scroll in height, you never know ... - WhyTry

Put the contents of overflow: hidden into the container and give it (the container) overflow: scroll