Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jiaming Zhang
Jiaming Zhang
10,170 Points

Assume both parent and children element are scrollable, how to lock parent when I scroll children element?

Assume I have a div in my html 

<div class="container"> 
  ...... lots of text here ....
</div>

I assign two properties to the container div

.container {
  overflow: scroll;
}

When my mouse enter the container area, and I scroll, the text inside the div move first; if it reach to an end, the continued scroll move the whole web page.

I want to lock the web page when I scroll inside the div. Is there any way to do it?

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Could you try changing overflow: scroll to overflow: hidden?

Depending on your layout the above may prevent the page from functioning properly. In which case you probably need to use JavaScript to add and remove event listeners.

This may be of some assistance - https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily