CSS overscroll-behavior-inline

overscroll-behavior-inline in CSS is a property that allows you to control how containers handle the behavior of scrolling inline.

When dealing with content that is scrollable horizontally, the overscroll-behavior-inline property helps define the behavior when the user reaches the end of the scrollable content.

The values that overscroll-behavior-inline can take are:

1. auto: The default value. It allows the browser to determine the behavior when overscrolling.
2. contain: The browser prevents scroll chaining (scrolling one scrollable area followed by another) when the user scrolls horizontally at the beginning or end of the container.
3. none: The browser does not allow any overscrolling behavior. This prevents scrolling chaining and rubber-banding when the user scrolls horizontally at the beginning or end of the container.

Let's see an example of how overscroll-behavior-inline works:

    .scrollable-container {
      overscroll-behavior-inline: contain;
      white-space: nowrap;
      overflow-x: auto;
    }