Free CSS Overscroll Behavior Generator
Control scroll chaining and bounce effects with our free tool. Overscroll-behavior CSS.
- Contain/none/auto options
- X and Y axis control
- Scroll container demo
- Modal scroll example
- Browser support info
Frequently Asked Questions
What is scroll chaining?
When you scroll to the end of a nested container and continue scrolling, the parent starts scrolling. Overscroll-behavior: contain stops this 'chaining' effect.
How do I prevent body scroll when a modal is open?
Add overscroll-behavior: contain to the modal's scrollable content. This prevents scroll from escaping to the page body when users reach the modal's scroll boundaries.
What's the bounce effect?
On iOS and some browsers, scrolling past boundaries creates a rubber-band bounce. overscroll-behavior: none disables this bounce effect.