The overscroll-behavior shorthand controls what happens when the user reaches a scroll boundary — whether scrolling chains to an ancestor, and whether browser default actions (pull-to-refresh, back navigation) fire. One value applies to both axes; two values set block then inline..modal {
overscroll-behavior: contain;
}.pane {
overscroll-behavior: contain none;
}autoDefault. The user agent performs its usual boundary action (including scroll chaining and pull-to-refresh).containPrevents non-local boundary actions — no scroll chaining, no pull-to-refresh; local scrolling still works.noneSame as contain, and additionally prevents local boundary actions (e.g. bounce effect).chainAllows scroll chaining to the ancestor, but prevents local boundary actions.CSS Overscroll Behavior Module Level 1Editor's DraftW3CMDN: contain auto;">
overscroll-behavior-block has been used to make it so that
when the scroll boundaries of the yellow inner box are reached, the
whole page does not begin to scroll.
Show all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
