v150 · CSS · Scroll
Compatibility Lab
Probes all four overscroll-behavior values with CSS.supports(), runs a live scroll-chaining test to detect whether the chain value is honoured by this browser, and shows the JS-based fallback pattern for browsers that don't support chain yet.
CSS.supports() probes
Live chain detection
The outer box (striped) wraps an inner box. The inner box has overscroll-behavior-y: chain applied. Scroll the inner box to its bottom — if the outer box also scrolls, chain works.
current value:
chain
chaining: ?
outer scroller (striped) — scroll propagates here if chain works
↑ inner scroller
scroll down past end →
— bottom of inner —
scroll down past end →
— bottom of inner —
Scroll the inner box to its bottom to test chaining.
scroll event log will appear here…
Value behaviour matrix
| value | chains to parent? | overscroll glow/bounce? | use case |
|---|---|---|---|
auto |
yes | yes | default browser behaviour |
chain |
yes | no | drawers, sidebars — chain without glow |
contain |
no | no | modals, sticky panels — trap scroll |
none |
no | no | block all overscroll effects |
JavaScript fallback pattern
/* Detect whether 'chain' is supported */
const SUPPORTS_CHAIN = CSS.supports('overscroll-behavior', 'chain');
/* @supports guard in CSS */
@supports not (overscroll-behavior: chain) {
/* Fallback: use 'contain' + manual JS to propagate scroll */
.drawer { overscroll-behavior-y: contain; }
}
/* JavaScript fallback for drawer scroll propagation */
function applyScrollChainFallback(inner, outer) {
if (SUPPORTS_CHAIN) return; // native supported
inner.addEventListener('wheel', (e) => {
const { scrollTop, scrollHeight, clientHeight } = inner;
const atTop = scrollTop === 0 && e.deltaY < 0;
const atBottom = scrollTop + clientHeight >= scrollHeight && e.deltaY > 0;
if (atTop || atBottom) {
e.preventDefault();
outer.scrollTop += e.deltaY;
}
}, { passive: false });
}
// Usage:
applyScrollChainFallback(
document.querySelector('.drawer'),
document.querySelector('.page')
);
implementation reference
Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗