CSS overscroll-behavior-y Property

This property controls the browser's behavior when the vertical scroll boundary of an element is reached.

selector { overscroll-behavior-y: value; }
auto Allows the default scroll chaining behavior where the parent container scrolls after the element boundary is reached.
contain Prevents scroll chaining to parent elements but preserves native overscroll affordances like the bounce effect.
none Prevents scroll chaining and also disables native overscroll affordances like bouncing or glow effects.

Code Examples

A basic scrollable container that prevents vertical scroll chaining to the parent page.

<div style="height: 300px; overflow-y: auto; overscroll-behavior-y: contain; border: 2px solid #333333; padding: 10px;">
  <div style="height: 800px; background: linear-gradient(#ffffff, #cccccc);">
    Scroll down to the bottom of this box. Notice that once you hit the end, the main page behind this box does not start scrolling. This is the power of the contain value.
  </div>
</div>

An advanced mobile-style sidebar using JavaScript to toggle overscroll behavior, preventing both chaining and the native bounce effect.

<div id="mobileMenu" style="position: fixed; top: 0; left: 0; width: 250px; height: 100%; background: #222222; color: #ffffff; overflow-y: auto; overscroll-behavior-y: none; padding: 20px;">
  <ul style="list-style: none; padding: 0;">
    <li style="height: 100px; border-bottom: 1px solid #444444;">Menu Link 1</li>
    <li style="height: 100px; border-bottom: 1px solid #444444;">Menu Link 2</li>
    <li style="height: 100px; border-bottom: 1px solid #444444;">Menu Link 3</li>
    <li style="height: 100px; border-bottom: 1px solid #444444;">Menu Link 4</li>
    <li style="height: 100px; border-bottom: 1px solid #444444;">Menu Link 5</li>
    <li style="height: 100px; border-bottom: 1px solid #444444;">Menu Link 6</li>
  </ul>
  <button onclick="toggleOverscroll()">Toggle Scroll Behavior</button>
</div>

<script>
function toggleOverscroll() {
  const menu = document.getElementById("mobileMenu");
  const current = menu.style.overscrollBehaviorY;
  menu.style.overscrollBehaviorY = current === "none" ? "auto" : "none";
  console.log("Overscroll behavior set to: " + menu.style.overscrollBehaviorY);
}
</script>

Pro Tip

If you are building a custom 'pull-to-refresh' feature using JavaScript, set this property to "none". This stops the browser's native refresh action from triggering, giving your script full control over the touch-drag interactions without the browser fighting you.

Deep Dive

Think of scroll chaining like a relay race where the browser hands the scroll 'baton' to the parent container once the child element finishes its scroll. By default, when you reach the bottom of a scrollable div, the whole web page starts moving. The "overscroll-behavior-y" property acts like a wall that stops that baton from being passed. When set to "contain", the scroll interaction stays inside the element, and the parent page remains still. This is critical for building components like mobile side-menus or chat boxes where you want the user's focus to remain on the specific content they are interacting with, rather than accidentally sliding the entire page around.

Best Practices

Apply this property to fixed overlays, modals, or side navigation bars to ensure that scrolling through that specific content does not inadvertently move the background page. Use "contain" if you want to keep the natural 'rubber-band' feel on mobile devices while stopping the scroll from leaking out. Use "none" if you are implementing custom pull-to-refresh logic or if you want a rigid boundary with no visual bounce at all.

Common Pitfalls

This property has no effect on elements that are not scrollable. If the content fits perfectly within the container and no overflow exists, you won't see the property doing any work. Also, remember that "overscroll-behavior-y" is a shorthand for the vertical axis; if you need to control horizontal scrolling, you must use "overscroll-behavior-x" or the general "overscroll-behavior" shorthand.

Accessibility

While preventing scroll chaining improves the experience for most, be careful not to create 'scroll traps' for users who rely on keyboard navigation or specialized input devices. If a user is stuck in a small container and cannot easily exit it to scroll the main page, it can cause frustration. Always ensure your UI provides clear visual cues or alternative ways to navigate the main layout.

Dev Data Table: overscroll-behavior-y property

default auto
animatable no
inherited no
experimental no
year_intro 2017
year_standard 2017
js_syntax_1 element.style.overscrollBehaviorY = "contain";
js_syntax_2 element.style.setProperty("overscroll-behavior-y", "none");
js_note When using the property name directly on the style object in JavaScript, use camelCase formatting.
browsers { "Chrome": 63, "Edge": 18, "Firefox": 59, "Safari": 16, "Opera": 50, "Chrome Android": 63, "Safari on iOS": 16, "Samsung Internet": 8, "Opera Mobile": 46 }
results render here...