Widely availableUseful in apps with nested scrolling or modal panels where accidental page movement hurts usability.
Interaction Widely available

overscroll-behavior

overscroll-behavior controls what happens when a scroll container reaches its edge. It helps manage scroll chaining, bounce behavior, and pull-to-refresh interactions.

InteractionScrollingContainment

Overview

overscroll-behavior controls what happens when a scroll container reaches its edge. It helps manage scroll chaining, bounce behavior, and pull-to-refresh interactions.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
overscroll-behavior
63
18
59
16
63
16
Other
css.properties.overscroll-behavior-block

The overscroll-behavior-block CSS property sets the browser's behavior when the block direction boundary of a scrolling area is reached.
77
79
73
16
77
16
CSS property
auto
77
79
73
16
77
16
contain
77
79
73
16
77
16
none
77
79
73
16
77
16
Other
css.properties.overscroll-behavior-inline

The overscroll-behavior-inline CSS property sets the browser's behavior when the inline direction boundary of a scrolling area is reached.
77
79
73
16
77
16
CSS property
auto
77
79
73
16
77
16
contain
77
79
73
16
77
16
none
77
79
73
16
77
16
Other
css.properties.overscroll-behavior-x

The overscroll-behavior-x CSS property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.
63
18
59
16
63
16
CSS property
auto
63
18
59
16
63
16
contain
63
18
59
16
63
16
none
63
79
59
16
63
16
Other
css.properties.overscroll-behavior-y

The overscroll-behavior-y CSS property sets the browser's behavior when the vertical boundary of a scrolling area is reached.
63
18
59
16
63
16
CSS property
auto
63
18
59
16
63
16
contain
63
18
59
16
63
16
none
63
79
59
16
63
16
auto
63
79
59
16
63
16
contain
63
79
59
16
63
16
none
63
79
59
16
63
16
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • The `none` value incorrectly behaves as `contain` (allowing for the elastic bounce effect).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • The `none` value incorrectly behaves as `contain` (allowing for the elastic bounce effect).
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (79)
Implementation note
  • The `none` value incorrectly behaves as `contain` (allowing for the elastic bounce effect).

Syntax

CSS 
/* Prevent modal scroll chaining */
.modal {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Disable pull-to-refresh */
body {
  overscroll-behavior-y: none;
}

Live demo

Contain(linkprevention)

overscroll-behavior Contain(linkprevention) demo.

PreviewFullscreen

None(bounce also prevention)

overscroll-behavior None(bounce also prevention) demo.

PreviewFullscreen

Auto(default)

overscroll-behavior Auto(default) demo.

PreviewFullscreen

Use cases

  • Contained scroll panels

    Prevent a nested panel from scrolling the whole page when the inner content reaches its boundary.

  • Modal and drawer content

    Keep focused overlays self-contained so background movement feels less accidental.

Cautions

  • Over-constraining overscroll can make the interface feel less natural on touch devices.
  • Nested scroll behavior should still be understandable and discoverable rather than technically contained but confusing.

Accessibility

  • Contained scrolling can help focus, but users still need a clear sense of which region is scrollable.

Related links

Powered by web-features