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