1. css
  2. /properties
  3. /overscroll-behavior



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.


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;


autoThe browser determines the appropriate scroll overflow behavior based on the user's device and browser. (default)
noneDisables scroll overflow behavior.
containPrevents scroll overflow on the same axis as the scrollable content, while allowing scroll overflow on the other axis.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera