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.
Have you seen CSS Scan?
Check the CSS of any element you hover over, instantly.
Learn more →