v144 · CSS · demo
Values Explorer
Side-by-side comparison of all three overscroll-behavior values — auto, contain, none — for keyboard scrolling. Tab into any box and press ↓ or Page Down to see whether the scroll chains to the parent.
Chrome 144:
overscroll-behavior now applies to keyboard-triggered scrolls (arrow keys, Page Up/Down, Space) in addition to touch and mouse-wheel scrolls. Tab into each box below to test.
Tab to focus a box, then use ↓ / Page Down / Space to scroll. Watch whether the page scrolls after the box reaches its end.
Live probe: focus a scroller to track its keyboard scroll position and boundary state.
overscroll-behavior: auto
default
Line 1 — scroll-behavior: auto
Line 2 — this is the default
Line 3 — scroll chains when end is reached
Line 4 — keep scrolling with ↓ or Page Down
Line 5 — once you pass line 7, the page scrolls
Line 6 — ← the chain point
Line 7 — last line in this box
overscroll-behavior: contain
recommended
Line 1 — overscroll-behavior: contain
Line 2 — scroll stays inside this box
Line 3 — no scroll chain to the page
Line 4 — keyboard scrolling also contained (Chrome 144)
Line 5 — bounce/glow effects still show
Line 6 — use for chat windows, code editors
Line 7 — last line — try Page Down
overscroll-behavior: none
no effects
Line 1 — overscroll-behavior: none
Line 2 — no chain, no bounce, no glow
Line 3 — hard stop at the boundary
Line 4 — keyboard scrolling also hard-stopped (Chrome 144)
Line 5 — use for scroll containers that need no visual feedback
Line 6 — differs from contain: no native over-scroll effects
Line 7 — last line
nested scrollers — keyboard chain test
Click inside the inner box (dashed border), then scroll with keyboard keys. contain stops at the inner box; auto chains to the outer box, then the page.
Inner: contain / Outer: auto
Inner box stops — outer box chains freely
Inner line 1
Inner line 2
Inner line 3
Inner line 4
Inner line 5
Inner line 6
Outer content A
Outer content B
Outer content C
Outer content D
Inner: none / Outer: contain
Neither inner nor outer chain to the page
Inner line 1
Inner line 2
Inner line 3
Inner line 4
Inner line 5
Inner line 6
Outer content A
Outer content B
Outer content C
behavior matrix
| overscroll-behavior value | Scroll chains (touch/wheel) | Scroll chains (keyboard — Chrome 144) | Over-scroll effects (bounce/glow) |
|---|---|---|---|
auto (default) |
✗ Chains to parent | ✗ Chains to parent | Shown |
contain |
✓ Contained | ✓ Contained | Shown (within element) |
none |
✓ Contained | ✓ Contained | Suppressed |