overscroll-behavior
Control scroll chaining and boundary effects in nested scroll areas.
Overview
| Class | Declarations |
|---|---|
overscroll-behavior:auto | overscroll-behavior: auto;
|
overscroll-behavior:contain | overscroll-behavior: contain;
|
overscroll-behavior:none | overscroll-behavior: none;
|
overscroll-behavior-x:auto | overscroll-behavior-x: auto;
|
overscroll-behavior-y:auto | overscroll-behavior-y: auto;
|
overscroll-behavior-x:contain | overscroll-behavior-x: contain;
|
overscroll-behavior-y:contain | overscroll-behavior-y: contain;
|
overscroll-behavior-x:none | overscroll-behavior-x: none;
|
overscroll-behavior-y:none | overscroll-behavior-y: none;
|
overscroll-behavior:<value> | overscroll-behavior: <value>;
|
overscroll-behavior-x:<value> | overscroll-behavior-x: <value>;
|
overscroll-behavior-y:<value> | overscroll-behavior-y: <value>;
|
Examples
Contain nested scrolling
overscroll-behavior:contain keeps a gesture from chaining to an ancestor when the inner scroll area reaches its boundary. Send the inner collection to its end, then scroll over it again. Compare the outer position in the two panels.
<div id="outer-scroll" class="overflow-y:auto h:14rem p-sm overscroll-behavior:contain" tabindex="0" aria-label="Outer collection"> <div id="inner-scroll" class="overflow-y:auto h:9rem overscroll-behavior:contain" tabindex="0" aria-label="Inner collection"> <div class="h-xs">Inner collection</div> </div> <div class="h-xs mt-md">Outer collection continues</div></div>Generated CSS
@layer utilities { .overscroll-behavior\:contain { overscroll-behavior: contain }}Suppress boundary effects on one axis
overscroll-behavior-y:none blocks vertical chaining and the browser’s local vertical overscroll effect. contain still allows local effects. Rubber-band bounce, glow and navigation gestures depend on the browser and device, so compare their behavior on the platform you support.
<div id="outer-scroll" class="overflow-y:auto h:14rem p-sm overscroll-behavior:contain" tabindex="0" aria-label="Outer collection"> <div id="inner-scroll" class="overflow-y:auto h:9rem overscroll-behavior-y:none" tabindex="0" aria-label="Inner collection"> <div class="h-xs">Inner collection</div> </div> <div class="h-xs mt-md">Outer collection continues</div></div>Keep horizontal gestures local
Use overscroll-behavior-x:contain on the inner horizontal scroller. At its right edge, another horizontal gesture stays inside that component instead of advancing the outer track.
<div id="outer-scroll" class="overflow-x:auto p-sm overscroll-behavior:contain"> <div class="flex gap-md w:40rem"> <div id="inner-scroll" class="overflow-x:auto flex-shrink:0 h:9rem w:14rem overscroll-behavior-x:contain" tabindex="0" aria-label="Inner horizontal collection"> <div class="h:100% w-md">Inner collection</div> </div> <div class="h:9rem w-xs">Outer collection continues</div> </div></div>Apply conditionally
Use selectors and conditional queries to apply the change only when its condition matches. The inner scroller contains chaining at narrow widths and allows it from sm. Resize, send the inner collection to its end, then try another gesture.
<div id="outer-scroll" class="overflow-y:auto h:14rem p-sm overscroll-behavior:contain" tabindex="0" aria-label="Outer collection"> <div id="inner-scroll" class="overflow-y:auto h:9rem overscroll-behavior:contain overscroll-behavior:auto@sm" tabindex="0" aria-label="Inner collection"> <div class="h-xs">Inner collection</div> </div> <div class="h-xs mt-md">Outer collection continues</div></div>