CSS overscroll-behavior-x Property

Description

The overscroll-behavior-x CSS property is used to control the behavior of horizontal scrolling beyond the boundaries of an element, such as a container with overflow. It allows developers to specify whether the browser should allow or prevent the default scroll behavior when users try to scroll horizontally past the edges of the container. This property is particularly useful for improving user experience, as it can prevent unintentional horizontal scrolling, ensuring that users can smoothly navigate the content within the container without unexpected scrolling behavior.

Initial value
auto
Applies to
non-replaced block-level elements and non-replaced inline-block elements
Inherited
no
Computed value
as specified
Animatable
discrete
JavaScript syntax
object.style.overscrollBehaviorX

Syntax

overscroll-behavior-x: auto | contain | none

Values

  • autoThe default scroll overflow behavior occurs as normal.
  • containDefault scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
  • noneNo scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

Example

    <main>
<div>
<div>
<p><code>overscroll-behavior-x</code> has been used to make it so that when the scroll boundaries of the inner box are reached, the whole page does not begin to scroll.</p>
</div>
</div>
</main>
main {
      height: 500px;
      width: 3000px;
      background-color: magenta;
      background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
    }

main > div {
      height: 300px;
      width: 500px;
      overflow: auto;
      position: relative;
      top: 100px;
      left: 100px;
      overscroll-behavior-x: contain;
}

div > div {
      height: 100%;
      width: 1500px;
      background-color: yellow;
      background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
}

p {
      padding: 10px;
      background-color: rgba(255,0,0,0.5);
      margin: 0;
      width: 300px;
      position: relative;
      top: 10px;
      left: 10px;
}

Browser Support

The following table will show you the current browser support for the CSS overscroll-behavior-x property.

Desktop
Edge Chrome Firefox Opera Safari
1863595016
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
63594616863

Last updated by CSSPortal on: 31st December 2023