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.
You can do this with a single CSS rule!
Thanks to the CSS property:
To stop the scroll at the end of an element, set on the element’s CSS:
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.
See the Pen Overscroll-behavior demo by Guilherme Rizzo (@guivr) on CodePen.
MDN documentation for
Have you seen CSS Scan?
Check the CSS of any element you hover over, instantly.
Learn more →