CSS overscroll-behavior-x Property

CSS overscroll-behavior-x Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The overscroll-behavior-x property controls how a scrolling container reacts when the user scrolls past the horizontal edges of its scrollable area. In practice this means it governs what happens when horizontal momentum or touch gestures try to continue scrolling beyond the left or right boundary: whether the scroll is allowed to “chain” to ancestor containers, whether the browser’s default boundary effects (such as bounce or glow) are shown, and whether those interactions are contained within the element. By targeting only the x-axis, it lets authors fine-tune horizontal behavior independently of vertical scrolling, which is useful for interfaces that mix horizontal and vertical interactions.

Understanding how overscroll-behavior-x affects nested scrolling and gesture handling is important. When scrolling reaches a horizontal limit, the browser must decide whether to hand the remaining scroll delta to a parent scroller (scroll chaining), trigger overscroll visual feedback, or stop entirely. Controlling the x-axis only avoids interfering with vertical gestures while preventing undesired horizontal propagation — for example, stopping a horizontal carousel from moving the page beneath it. It also interacts with inertia and fling gestures: preventing chaining can stop momentum from being transferred to other elements, giving more predictable, contained motion for horizontal components.

In real-world use, overscroll-behavior-x is commonly paired with other layout and input-related properties to achieve robust, touch-friendly components. It complements the overall shorthand overscroll-behavior and the vertical counterpart overscroll-behavior-y, letting you mix axis-specific settings. It’s frequently considered alongside scrolling containment and overflow management — for example, how an element’s horizontal overflow is handled via overflow — and with pointer/touch interaction tuning such as touch-action. Applied thoughtfully, it improves user experience by preventing accidental page scrolls, reducing visual clutter from unwanted boundary effects, and making touch-driven horizontal widgets behave more reliably.

Definition

Initial value: auto
Applies to: non-replaced block-level elements and non-replaced inline-block elements
Inherited: no
Computed value: as specified
Animatable: yes
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

HTML

<div class="outer-scroll">

  <div class="demo">

    <h2>Default (scroll chaining)</h2>

    <div class="inner-scroll default">

      <div class="item">1</div>

      <div class="item">2</div>

      <div class="item">3</div>

      <div class="item">4</div>

      <div class="item">5</div>

      <div class="item">6</div>

      <div class="item">7</div>

      <div class="item">8</div>

    </div>

  </div>



  <div class="demo">

    <h2>overscroll-behavior-x: contain</h2>

    <div class="inner-scroll contain">

      <div class="item">1</div>

      <div class="item">2</div>

      <div class="item">3</div>

      <div class="item">4</div>

      <div class="item">5</div>

      <div class="item">6</div>

      <div class="item">7</div>

      <div class="item">8</div>

    </div>

  </div>

</div>

CSS

/* Layout for the outer horizontal scroller */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f6f8fb;
  padding: 20px;
}
.outer-scroll {
  width: 160vw; /* make the container wider than the viewport so it can scroll */
  display: flex;
  gap: 24px;
  padding: 20px;
  overflow-x: auto;
  align-items: flex-start;
}
.demo {
  flex: 0 0 48%;
  min-width: 420px;
  background: #ffffff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}
.demo h2 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #0f172a;
}
.inner-scroll {
  overflow-x: auto;
  white-space: nowrap;
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #eef7ff 0%, #f7fbff 100%);
  border: 1px solid rgba(2,6,23,0.06);
}
.inner-scroll .item {
  display: inline-block;
  width: 160px;
  height: 96px;
  margin-right: 12px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  line-height: 96px;
  text-align: center;
  user-select: none;
}
/* Default demo uses normal scroll chaining */
.default {
  /* no explicit overscroll-behavior set */
}
/* Prevent horizontal scroll chaining from the inner scroller to the outer scroller */
.contain {
  overscroll-behavior-x: contain;
}

/* Small responsive tweak */
@media (max-width: 640px) {
  .outer-scroll {
    width: 240vw;
  }
  .demo {
    min-width: 320px;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS overscroll-behavior-x property. Hover over a browser icon to see the version that first introduced support for this CSS property.