Overscroll-behavior-inline is a CSS property that controls the behavior of scrolling when the content of an element overflows its container horizontally. It is used to specify whether or not the browser should allow scrolling past the edge of the content and how it should behave when it does.
The overscroll-behavior-inline property is part of the CSS Overscroll Behavior Module Level 1, which provides a way to control the behavior of scrolling and overscrolling in CSS. This module includes three properties: overscroll-behavior-x, overscroll-behavior-y, and overscroll-behavior-inline. The overscroll-behavior-inline property is used to control the behavior of scrolling when the content overflows its container horizontally.
The overscroll-behavior-inline property can have three values: auto, contain, and none. The default value is auto, which means that the browser will allow scrolling past the edge of the content and will use its default behavior when it does. The contain value means that the browser will not allow scrolling past the edge of the content and will instead bounce back to the edge. The none value means that the browser will not allow scrolling past the edge of the content and will not bounce back to the edge.
Here are some examples of how to use the overscroll-behavior-inline property:
<style>
.container {
width: 200px;
height: 100px;
overflow-x: scroll;
overscroll-behavior-inline: contain;
}
</style>
<div class="container">
<p>This is some long content that overflows its container horizontally.</p>
</div>
In this example, the overscroll-behavior-inline property is set to contain, which means that the browser will not allow scrolling past the edge of the content and will instead bounce back to the edge.
<style>
.container {
width: 200px;
height: 100px;
overflow-x: scroll;
overscroll-behavior-inline: none;
}
</style>
<div class="container">
<p>This is some long content that overflows its container horizontally.</p>
</div>
In this example, the overscroll-behavior-inline property is set to none, which means that the browser will not allow scrolling past the edge of the content and will not bounce back to the edge.
Overall, the overscroll-behavior-inline property is a useful tool for controlling the behavior of scrolling and overscrolling in CSS. By using this property, you can ensure that your content is displayed in the way that you want it to be, without any unwanted scrolling or bouncing effects.