CSS overscroll-behavior Property

Description

The overscroll-behavior property gives authors control over what happens when a user scrolls past the start or end of a scroll container. Instead of allowing the browser’s default “overscroll” effects — such as rubber-banding, glow indicators or scroll chaining into parent containers and the document root — this property lets you constrain those outcomes so an inner scroller can stop cleanly at its bounds without kicking the scroll gesture up to an ancestor or triggering system-level gestures (like pull-to-refresh or navigation swipes).

Because it targets the interaction at the moment a scroll reaches a boundary, overscroll-behavior is primarily useful for composing complex scrolling UI: modal dialogs with their own scrollable content, horizontally scrolling carousels embedded in vertically scrolling pages, or fixed-size panels that should absorb touch input without letting the page behind move. Applied to the page root, it can also be used to prevent the document from responding to overscroll gestures that would otherwise trigger a browser UI action. It only affects the outcome of user-initiated scrolling at container boundaries and does not change whether an element is itself scrollable; for that, authors pair it with properties that control scrollable axes such as overflow.

When integrating overscroll-behavior into a UI, consider how it interacts with other input- and scroll-related properties. It complements gesture control provided by touch-action (which governs whether the browser allows panning/zooming gestures on an element) and works alongside scroll configuration like scroll-behavior (which affects programmatic or smooth scroll animation). From an accessibility and UX perspective, constraining overscroll can reduce accidental navigation and provide a more predictable containment of gestures, but be careful not to remove expected system affordances (for example, disabling a platform’s pull-to-refresh on content where users expect it).

Definition

Initial value: auto
Applies to: non-replaced block-level elements and non-replaced inline-block elements
Inherited: no
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.overscrollBehavior

Syntax

overscroll-behavior: [ contain | none | auto ]{1,2}

Values

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.
autoThe default scroll overflow behavior occurs as normal.

Example

HTML

<div class='page'>

  <header class='header'>

    <h1>overscroll-behavior demo</h1>

    <p>Scroll inside the boxes below while the page itself is scrollable.</p>

  </header>



  <main class='grid'>

    <section class='panel'>

      <h2>Default (auto)</h2>

      <div class='scroll-box demo-auto'>

        <ul class='items'>

          <li>Item 1</li>

          <li>Item 2</li>

          <li>Item 3</li>

          <li>Item 4</li>

          <li>Item 5</li>

          <li>Item 6</li>

          <li>Item 7</li>

          <li>Item 8</li>

          <li>Item 9</li>

          <li>Item 10</li>

          <li>Item 11</li>

          <li>Item 12</li>

        </ul>

      </div>

      <p class='note'>Default allows scroll chaining  -  reaching the edge continues scrolling the page.</p>

    </section>



    <section class='panel'>

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

      <div class='scroll-box demo-contain'>

        <ul class='items'>

          <li>Item 1</li>

          <li>Item 2</li>

          <li>Item 3</li>

          <li>Item 4</li>

          <li>Item 5</li>

          <li>Item 6</li>

          <li>Item 7</li>

          <li>Item 8</li>

          <li>Item 9</li>

          <li>Item 10</li>

          <li>Item 11</li>

          <li>Item 12</li>

        </ul>

      </div>

      <p class='note'>Contain prevents scroll chaining but preserves default boundary effects.</p>

    </section>



    <section class='panel'>

      <h2>overscroll-behavior: none</h2>

      <div class='scroll-box demo-none'>

        <ul class='items'>

          <li>Item 1</li>

          <li>Item 2</li>

          <li>Item 3</li>

          <li>Item 4</li>

          <li>Item 5</li>

          <li>Item 6</li>

          <li>Item 7</li>

          <li>Item 8</li>

          <li>Item 9</li>

          <li>Item 10</li>

          <li>Item 11</li>

          <li>Item 12</li>

        </ul>

      </div>

      <p class='note'>None prevents scroll chaining and default browser behaviors like pull-to-refresh.</p>

    </section>

  </main>



  <footer class='footer'>

    <p>Additional page length is provided by body min-height so the page itself can scroll.</p>

  </footer>

</div>

CSS

/* Page and layout */
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #111;
  background: linear-gradient(180deg, #f6f8fa 0%, #eef3f8 100%);
  min-height: 200vh; /* ensure the page is scrollable to demonstrate chaining */
}

.page {
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
}

.header {
  background: #fff;
  padding: 18px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
  margin-bottom: 20px;
}

.header h1 {
  margin: 0 0 6px 0;
  font-size: 20px;
}

.header p {
  margin: 0;
  color: #555;
  font-size: 13px;
}

/* Responsive grid for panels */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.panel {
  background: #fff;
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.04);
}

.panel h2 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.note {
  margin: 10px 0 0 0;
  font-size: 12px;
  color: #666;
}

/* Scroll boxes to demonstrate overscroll-behavior */
.scroll-box {
  height: 220px;
  overflow: auto;
  border: 1px solid #e6eef6;
  border-radius: 8px;
  padding: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

/* Different overscroll behaviors */
.demo-auto {
  /* default behavior: auto (scroll chaining allowed) */
}

.demo-contain {
  /* Prevents scroll chaining to the page but preserves boundary effects */
  overscroll-behavior: contain;
}

.demo-none {
  /* Prevents scroll chaining and disables default boundary actions (e.g. pull-to-refresh) */
  overscroll-behavior: none;
}

.items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.items li {
  padding: 10px 8px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}

.footer {
  margin-top: 24px;
  color: #666;
  font-size: 13px;
}

Result

Editor

Browser Support

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