CSS overscroll-behavior Property

This property defines what the browser does when the scroll boundary of a container is reached. It is used to stop scroll events from leaking into parent elements, effectively disabling scroll chaining.

selector { overscroll-behavior: [ auto | contain | none ]; }
auto The default behavior where scroll momentum is passed to parent elements once the boundary is reached.
contain Prevents scroll chaining to parents but keeps native overscroll visual effects like the rubber-band bounce.
none Prevents scroll chaining and disables all local overscroll visual effects and pull-to-refresh gestures.

Code Examples

A basic scrollable box that uses contain to prevent the scroll momentum from moving the main page.

<div style="width: 300px; height: 200px; overflow-y: scroll; overscroll-behavior: contain; background: #eeeeee; border: 2px solid #333333; padding: 10px;">
  <p>Scroll down to the bottom of this box. Once you reach the end, notice that the main page does not start scrolling. This is the power of the contain value.</p>
  <div style="height: 500px; background: linear-gradient(#eeeeee, #cccccc);">Long Content Space</div>
</div>

An advanced navigation drawer example using JavaScript to toggle a fixed menu that prevents all scroll chaining and pull-to-refresh gestures.

<div id="sideMenu" style="position: fixed; top: 0; left: 0; width: 250px; height: 100%; overflow-y: auto; overscroll-behavior: none; background: #222222; color: #ffffff; padding: 20px; display: none;">
  <h3>Navigation</h3>
  <button onclick="toggleMenu()" style="background: #ff0000; color: #ffffff; border: none; padding: 5px;">Close</button>
  <div style="height: 1500px; margin-top: 20px;">Links and content that go way off screen...</div>
</div>
<button onclick="toggleMenu()">Open Menu</button>

<script>
function toggleMenu() {
  const menu = document.getElementById("sideMenu");
  const isOpen = menu.style.display === "block";
  menu.style.display = isOpen ? "none" : "block";
  // Using JS to ensure the property is set when active
  if (!isOpen) {
    menu.style.overscrollBehavior = "none";
    console.log("Menu scroll locked.");
  }
}
</script>

Pro Tip

If you are building a mobile web app and want to stop that annoying bounce effect at the top and bottom of the entire site, apply overscroll-behavior: none; to the html or body element. This makes the web app feel much more like a native compiled application by removing the default browser rubber-banding.

Deep Dive

Think of scroll chaining like a relay race. By default, when a nested container finishes its scroll distance, it passes the baton to the parent element, which then starts scrolling. This is often annoying in web apps where you want a sidebar or modal to be independent. The overscroll-behavior property tells the element to drop the baton and end the race right there. It is a shorthand for overscroll-behavior-x and overscroll-behavior-y. While auto allows the chain to continue, contain locks the scroll to the element while preserving the OS-level bounce effect. The none value is the most aggressive, killing the chain and the visual bounce entirely. This prevents the entire page from moving when a user is just trying to reach the bottom of a specific list or menu.

Best Practices

Use contain on fixed sidebars, dropdown menus, and modal windows to ensure the main page content stays stationary while the user interacts with the foreground element. This creates a much more professional and app-like experience. Avoid using none on the document body unless you specifically want to disable the pull-to-refresh feature on mobile devices, as this can confuse users who expect that native functionality.

Common Pitfalls

A common mistake is thinking this property prevents the element itself from scrolling. It does not. It only handles what happens at the edges of the scrollable area. Also, remember that if you apply this to the body element, it can interfere with browser-specific gestures like swipe-to-navigate or pull-to-refresh. Ensure you are applying it to the correct container level to avoid breaking expected browser navigation behaviors.

Accessibility

This property is great for accessibility because it prevents context loss. If a user is scrolling through a long list of options in a modal and the page behind it starts moving, it can be disorienting, especially for users with motion sensitivity or those using screen magnifiers. Locking the scroll to the active container helps keep the user's focus exactly where it needs to be.

Dev Data Table: overscroll-behavior property

default auto
animatable no
inherited no
experimental no
year_intro 2017
year_standard 2017
js_syntax_1 element.style.overscrollBehavior = "none";
js_syntax_2 element.style.setProperty("overscroll-behavior", "none");
js_note Target this property in JavaScript to dynamically lock the background page when a user opens a modal or navigation overlay.
browsers { "Chrome": 63, "Edge": 18, "Firefox": 59, "Safari": 16, "Opera": 50, "Chrome Android": 63, "Safari on iOS": 16, "Samsung Internet": 8.2, "Opera Mobile": 46 }
results render here...