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

MDN documentation for overscroll-behavior.

CanIUse browsers’ support for overscroll-behavior.