author avatar

giritharan

Mon Jul 01 2024

overscroll-behavior in CSS

The overscroll-behavior CSS property controls what happens when you reach the boundary of a scrollable area. It's useful for managing scroll chaining and preventing unwanted browser behaviors like the "bounce" effect or "pull to refresh."

Usage
- Default (auto): Normal scroll behavior.
- Contain: Stops scroll chaining; keeps default behavior within the element.
- None: Prevents both scroll chaining and the default overflow behavior.

Examples
Prevent underlying content from scrolling:

.scroll-container {
height: 220px;
overflow: auto;
overscroll-behavior-y: contain;
}

Disable overscroll effects:

html {
margin: 0;
overscroll-behavior: none;
}

#css #alignment-issue #frontend