overscroll-behavior

Definition

overscroll-behavior is a CSS property that controls the behavior of scroll overflow when scrolling past the edge of an element. It allows developers to define how the browser should handle the scrolling behavior when the user tries to scroll beyond the boundaries of an element that has reached the end of its scrollable area.

Examples

Disable scroll overflow behavior:

.element {
  overscroll-behavior: none;
}

Allow the browser to handle scroll overflow behavior:

.element {
  overscroll-behavior: auto;
}

Control overscroll behavior on both axes:

.element {
  overscroll-behavior: contain;
}

Control overscroll behavior on the x-axis only:

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

Control overscroll behavior on the y-axis only:

.element {
  overscroll-behavior-y: none;
}

Values

Best Practices

• Use contain to prevent unwanted scroll overflow
• Consider using overscroll-behavior-x and overscroll-behavior-y instead of overscroll-behavior
• Provide fallback options for browsers that do not support overscroll-behavior
• Test your code on multiple browsers and devices to ensure compatibility

Browser Compatibility