Codestin Search App

CSS overscroll-behavior-inline 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-inline property controls what the user agent does when a scroll operation reaches the boundary along the inline axis of an element. In practice this means it determines whether boundary interactions — such as scroll chaining to ancestor scroll containers, edge "bounce" effects, or built-in navigation gestures — are allowed to continue once the inline edge is hit, or whether those default responses are suppressed so the gesture stays confined to that element. Because it targets the inline axis only, it affects the direction that corresponds to the inline progression of text (horizontal in many languages, but not always).

This property is particularly useful for components that rely on confined inline panning: horizontal carousels, image sliders, timeline scrollers, or any nested scrollable UI where you want to prevent a drag from escaping into a parent container or triggering a browser-level navigation. It works together with the shorthand overscroll-behavior and the other axis-specific controls, and complements gesture-related controls such as touch-action so you can both prevent default browser gestures and control which pointer/touch gestures are allowed to begin. Using it helps create smoother, more predictable interactions when multiple scrollable layers or pan gestures are present.

Keep in mind that the physical axis governed by this property depends on text flow and layout orientation: the inline axis is defined by writing-mode and can be affected by direction, so the same rule may control left/right in one locale and top/bottom in another. It is not a security mechanism — it only suppresses ordinary overscroll responses from the user agent, and assistive technologies or other browser features might still provide alternative navigation. Finally, pairing inline overscroll control with complementary techniques such as snapping (scroll-snap-type) or careful focus management yields the most polished, accessible scrolling experiences.

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.overscrolBehaviorInline

Syntax

overscroll-behavior-inline: 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="page">

  <h2>Default (overscroll-behavior-inline: auto)</h2>

  <div class="carousel 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>



  <h2>Contain (overscroll-behavior-inline: contain)</h2>

  <div class="carousel 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>



  <p class="note">Try swiping horizontally (touch or trackpad). The second carousel prevents scroll chaining to the page when you reach its inline edges.</p>

</div>

CSS

/* Basic page layout */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f3f4f6;
  color: #0f172a;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 900px;
  margin: 0 auto;
}

h2 {
  margin: 18px 0 8px;
  font-size: 16px;
  font-weight: 600;
}

/* Horizontal carousels */
.carousel {
  display: flex;
  gap: 12px;
  padding: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(2,6,23,0.06);
}

/* Default behavior (scroll chains to parent/page when reaching edges) */
.carousel.default {
  overscroll-behavior-inline: auto; /* default; included for clarity */
}

/* Contain inline overscroll so scrolling doesn't chain to the page */
.carousel.contain {
  overscroll-behavior-inline: contain;
}

.item {
  flex: 0 0 180px;
  height: 120px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #06b6d4);
  user-select: none;
}

.note {
  margin-top: 14px;
  font-size: 13px;
  color: #334155;
}

Result

Editor

Browser Support

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