Codectionary / Developer documentation / CSS

Containing Scroll Chaining

Scroll chaining can move an outer page when an inner scrolling panel reaches its boundary.

What it is and why to use it

Scroll chaining can move an outer page when an inner scrolling panel reaches its boundary. overscroll-behavior controls that boundary behaviour. contain is useful for an independent scrolling region where the user should not unexpectedly start scrolling an ancestor.

Common mistakes and limitations

contain and none are different: none also suppresses relevant local overscroll effects. This is not a replacement for accessible modal focus management or a universal body-scroll lock. Browser and platform gesture policies still matter.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="panel"><div class="content">Scroll this panel to its boundary.</div></div>

Syntax

overscroll-behavior: contain;

Examples

Containing Scroll Chaining

Run the CSS against the supplied HTML, then experiment with the values.

.panel { height: 8rem; overflow: auto; overscroll-behavior: contain; border: 1px solid #94a3b8; }
.content { height: 22rem; padding: 1rem; background: linear-gradient(#dbeafe, #fff); }
  1. The panel has enough content to become scrollable.
  2. contain prevents boundary scroll chaining while allowing relevant local overscroll affordances.
  3. Compare with auto inside a larger scrollable page. The effect can differ for touch, wheel and platform gestures.
HTML used by this example
<div class="demo"><div class="panel"><div class="content">Scroll this panel to its boundary.</div></div></div>

Best practices

  • contain and none are different: none also suppresses relevant local overscroll effects. This is not a replacement for accessible modal focus management or a universal body-scroll lock. Browser and platform gesture policies still matter.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading