Interactivity

overscroll-behavior

Setting what a browser does when reaching the boundary of a scrolling area.

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

Use overscroll-behavior:contain on a scroll area when reaching its edge should not chain scrolling to the page behind it.

<div class="overflow:auto overscroll-behavior:contain">    Modal content</div>

Generated CSS

@layer utilities {    .overscroll-behavior\:contain {        overscroll-behavior: contain    }}

Use axis-specific utilities when only vertical or horizontal scroll chaining should be controlled.

<div class="overflow-y:auto overscroll-behavior-y:none">    Sheet</div>

Horizontal carousels often need overscroll-behavior-x:contain so a sideways gesture stays inside the carousel.

<div class="overflow-x:auto overscroll-behavior-x:contain">    Carousel</div>

Apply styles based on different states using selectors and conditional queries.

<div class="overscroll-behavior:contain overscroll-behavior:auto@sm overscroll-behavior:auto@print">...</div>

Setting the mouse cursor style.

Setting whether an element reacts to pointer events.