CSS overscroll-behavior-x

The overscroll-behavior-x CSS property controls the behavior of the horizontal scrollbar when scrolling either by touch, pointer device, or keyboard on the element it is applied to. It determines whether to allow the browser's default horizontal scrolling behavior, or prevent it and allow the user to scroll beyond the edge of the content.

The possible values for overscroll-behavior-x are: auto, contain, and none.

Example:

Result:


  div {
   overscroll-behavior-x: contain;
   overscroll-behavior-y: contain;
   scroll-snap-type: x mandatory;
  }

In this example, the overscroll-behavior-x: contain; property is applied to a div element. This means that when the user tries to scroll horizontally beyond the content, the scrolling is constrained to the bounds of the element. The scroll-snap-type: x mandatory; property ensures that horizontal scrolling aligns to snap points, if defined.

Value	Description
auto	Allow the browser's default behavior for overscrolling on the x-axis.
contain	Scrolling is constrained to the bounds of the element on the x-axis.
none	Prevent scrolling on the x-axis, allowing the user to overscroll.

Experiment with different values of overscroll-behavior-x to see how they affect the horizontal scrolling behavior of your elements.