The overscroll-behavior property controls what happens when a scroll boundary is reached. Here's how to use it.
Basic Usage
Loading code block...
Preventing Scroll Chaining
Loading code block...
Pull-to-Refresh Control
Loading code block...
Navigation Gestures
Loading code block...
Nested Scroll Containers
Loading code block...
Mobile App Feel
Loading code block...
Drawer and Sheet Components
Loading code block...
Form Containers
Loading code block...
Data Tables
Loading code block...
Code Editor Pattern
Loading code block...
JavaScript Integration
Loading code block...
Best Practices
Usage:
✓ Use contain for modals/overlays
✓ Use for isolated scroll areas
✓ Prevent unwanted navigation gestures
✓ Control pull-to-refresh
Values:
✓ auto: default browser behavior
✓ contain: prevent chaining only
✓ none: no chaining + no effects
Patterns:
✓ Modal dialogs
✓ Dropdown menus
✓ Side drawers
✓ Nested scroll containers
Avoid:
✗ Using on document body without reason
✗ Removing all scroll feedback
✗ Breaking expected mobile behaviors
✗ Forgetting touch scrolling
Conclusion
The overscroll-behavior property controls scroll chaining and boundary effects. Use contain to prevent scroll events from propagating to parent containers, and none to also disable bounce effects. It's essential for modals, dropdowns, and any nested scrolling containers to prevent unexpected scroll behavior.