How to prevent child elements from scrolling parent elements.

Today we’re going to talk about a nifty CSS property called overscroll-behavior.

The overscroll-behavior property gives you control over the scroll behavior between the child and parent elements. The property makes it easy to prevent the user from accidentally scrolling passed the inner scroll container of a div. This behavior is called scroll-chaining, and it’s the default behavior of the browser. In most cases, this is probably not the intended behavior you’d like for your users. The way to control this behavior is by using the property overscroll-behavior.

Values for overscroll-behavior

overscroll-behavior accepts two values, contain and none.

.stop-scroll-chaining {
  overscroll-behavior: contain || none;
}

contain stops or “contains” the scroll behavior to the element’s scrollable content. The great thing about overscroll-behavior is that it cascades, which means you can add it to your global resets if you don’t want this default behavior anywhere on your site.

The other value its none, which is basically like not setting this overscroll-behavior.

Conclusion

Overscroll-behavior is arguably a feature that really should be set to contian by default, but until this happens, if ever, it’s simple enough to set overscroll-behavior:contain.

That’s it for scroll-behavior! I hope you enjoyed this post aboutoverscroll-behavior!