How to prevent the page from scrolling when scrolling an element
There’s an easy way to prevent an element from scrolling its parent.
This means that if you have an element with a vertical or horizontal overflow and the user has reached the end of the scroll, the browser will start scrolling the parent element (which is mostly the body) - this is called ‘scroll chaining.’ But sometimes, preventing that behavior from happening is useful, e.g.: modals, chat popups, dropdowns.
CSS solution
To fix this problem, you don’t need to use Javascript or jQuery to check if the scroll event reached the end of the element.
You can do this with a single CSS rule!
Thanks to the CSS property:
overscroll-behavior
To stop the scroll at the end of an element, set on the element’s CSS:
overscroll-behavior: contain;
This way, if the user reaches the end of the scroll of an element, it will stop there and not “scroll-chain” to the body or parent element.
Demo
See the Pen Overscroll-behavior demo by Guilherme Rizzo (@guivr) on CodePen.
Useful resources
Have you seen CSS Scan?
Check the CSS of any element you hover over, instantly.
Learn more →