CSS Overscroll Behavior Generator
Generate CSS overscroll-behavior properties to control scroll chaining and bounce effects. Configure X and Y axes independently.
Settings
Generated CSS
overscroll-behavior: auto;
Demo
Scroll within the box below to see the overscroll behavior in action. Try scrolling past the edges both horizontally and vertically.
Scrollable Content
Current setting: overscroll-behavior: auto auto
This box is wider and taller than its container. Try scrolling to the edges in both directions to see how the overscroll-behavior property affects the scroll behavior.
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10
Content row 11
Content row 12
Content row 13
Content row 14
Content row 15
Content row 16
Content row 17
Content row 18
Content row 19
Content row 20
Usage Note:
The overscroll-behavior property is particularly useful for:
• Modal dialogs with scrollable content
• Full-screen maps
• Nested scrollable areas
• Mobile web apps to prevent pull-to-refresh