On countless occasions, I've been frustrated by the "rubber band" bounce effect on my web pages when scrolling past the scroll boundaries. I lose it completely especially when a parent element responds to my scroll pad while I'm scrolling through a child element. Well, a few days ago, I came across the overflow-scroll CSS property and what a discovery it's been.

What is overscroll-behavior?

It is a CSS property that gives you control over how browsers behave when a user scrolls past the boundaries of a scrollable area or container.

Without it, browsers may show:

  • Scroll chaining: Scrolling inside a child element causes the parent element (or page) to start scrolling once the child’s scroll reaches the end (default browser behaviour).
  • Overscroll affordance: A feedback to the user when trying to scroll beyond the scroll boundary. For example, a visual feedback together with a page refresh normally happens on mobile devices when tying to scroll beyond the top of a page.

By using this property, you can prevent scroll chaining or disable the overscroll affordance(bounce effect).

Syntax

css
1element {
2  overscroll-behavior: auto | contain | none;
3}

It has directional variations:

  • overscroll-behavior-x
  • overscroll-behavior-y

so can take at most, two values; with the first value affecting the x direction and the second, y.

Property Values

  • auto (default)
    Use case: You don’t need to change anything.
    • Normal browser behaviour.
    • Scroll chaining and bounce effects are allowed.
  • contain
    Use case: Modal dialogs or sidebars, where you don’t want the background page to scroll when the content inside reaches its end.
    • Prevents scroll chaining outside the element, but still allows the browser’s bounce effect.
css
1.modal {
2  overscroll-behavior: contain;
3}
  • none
    Use case: Apps where you want strict scroll control, like full-screen games, maps, or certain mobile experiences.
  • Prevents both scroll chaining and overscroll effects like bounce or glow.

Real-World Use Cases

  • Modals and Dialogs
  • Prevent the page behind from scrolling when a user scrolls inside the modal.
css
1.modal {
2  overscroll-behavior: contain;
3}
  • Infinite Scrolling Containers
  • Avoid accidentally scrolling the body when the list runs out of items.
css
1.infinite-scroll {
2  overscroll-behavior: none;
3}
  • Full-Screen Web Apps
  • Stop the browser’s elastic bounce for a more native app-like experience (my personal favourite).
css
1html, body {
2  overscroll-behavior: none;
3}

Good news: overscroll-behaviour is supported in all modern browsers, including Chrome, Edge, Firefox and Safari.

In Conclusion

The overscroll-behavior property may not seem flashy, but it’s a powerful tool for crafting smoother, more predictable user experiences. Whether it’s preventing background scroll in a modal, stopping scroll chaining in nested elements, or removing bounce effects for a web app, this property gives you fine-grained control over scrolling.

Next time you find your UI “scrolling away” unexpectedly, reach for overscroll-behavior.