CSS Overscroll Behavior

Intermediate

CSS Overscroll Behavior controls what may happen when a scroll container reaches a scroll boundary. It can prevent scroll chaining to an ancestor and can suppress local overscroll affordances. It does not create a scroll container: CSS Overflow owns overflow and scroll-container formation, while Scroll Snap owns snap destinations.

Separate scrolling from boundary behavior

overflow establishes the conditions under which content can overflow and scroll. Once a scroll container reaches an edge, overscroll behavior controls boundary actions such as handing the scroll to an ancestor (scroll chaining) or showing a local overscroll affordance. Keeping these responsibilities separate prevents a common mistake: using overflow when the actual requirement is to control what happens at the edge.

?

The overscroll-behavior values

The current editor draft defines auto, contain, none, and chain. auto keeps the user-agent's usual boundary behavior. contain prevents non-local actions such as scroll chaining while preserving local boundary affordances. none also suppresses local overscroll affordances. The current draft's chain value permits non-local boundary actions while suppressing local overscroll affordances; because this value is part of the live editor's draft, treat it as specification-tracking material rather than assuming identical support everywhere.

?

Physical and flow-relative longhands

Use overscroll-behavior-x and overscroll-behavior-y when you intentionally want physical horizontal and vertical axes. The current draft also defines overscroll-behavior-inline and overscroll-behavior-block, whose mapping follows writing-mode. Flow-relative properties are useful when the component should retain the same logical behavior across writing directions.

Do not replace overscroll-behavior with preventDefault

The current specification exists partly to avoid solving scroll chaining with non-passive input event listeners and preventDefault(). Those event handlers can delay scrolling, can cancel more behavior than intended, and do not automatically cover future input methods. overscroll-behavior expresses the CSS boundary policy directly. JavaScript event handling belongs to the Web Platform curriculum, not this CSS lesson.

Ownership boundaries

Overflow owns overflow, clipping, and scroll-container formation. Overscroll Behavior owns boundary actions. Scroll Snap owns snap positions and settling. Scroll-driven Animations owns scroll/view progress timelines. CSSOM View owns imperative scrolling APIs. This separation is intentional and prevents duplicate lessons.

Summary