CSS Overscroll Behavior Generator

Control scroll chaining and bounce effects with overscroll-behavior

Settings

Horizontal (X-axis)

auto - Default scroll chainingcontain - No scroll chaining, keep bouncenone - No chaining, no bounce

Vertical (Y-axis)

auto - Default scroll chainingcontain - No scroll chaining, keep bouncenone - No chaining, no bounce

Use shorthand (if both axes are same)

auto: Default browser behavior with scroll chaining and bounce effects

contain: Prevents scroll chaining to parent, keeps bounce effects

none: Prevents both scroll chaining and bounce effects

.element {
  overscroll-behavior-x: auto;
  overscroll-behavior-y: contain;
}

Try scrolling in both directions and notice the overscroll behavior at the edges.

Line 1 - Scroll to see the overscroll behavior

Line 2 - Scroll to see the overscroll behavior

Line 3 - Scroll to see the overscroll behavior

Line 4 - Scroll to see the overscroll behavior

Line 5 - Scroll to see the overscroll behavior

Line 6 - Scroll to see the overscroll behavior

Line 7 - Scroll to see the overscroll behavior

Line 8 - Scroll to see the overscroll behavior

Line 9 - Scroll to see the overscroll behavior

Line 10 - Scroll to see the overscroll behavior

Line 11 - Scroll to see the overscroll behavior

Line 12 - Scroll to see the overscroll behavior

Line 13 - Scroll to see the overscroll behavior

Line 14 - Scroll to see the overscroll behavior

Line 15 - Scroll to see the overscroll behavior

Line 16 - Scroll to see the overscroll behavior

Line 17 - Scroll to see the overscroll behavior

Line 18 - Scroll to see the overscroll behavior

Line 19 - Scroll to see the overscroll behavior

Line 20 - Scroll to see the overscroll behavior

Current: overscroll-behavior-x: auto, overscroll-behavior-y: contain