Overscroll-behavior is a CSS property that controls the behavior of scrolling when the user reaches the end of a scrollable area. It is used to define what happens when the user tries to scroll beyond the boundaries of an element. This property is particularly useful for touch devices where users can easily overscroll by mistake.
The overscroll-behavior property can be set to three different values:
auto: This is the default value. It allows the browser to handle the overscroll behavior.contain: This value prevents the overscroll from propagating to the parent element. It is useful when you want to prevent the overscroll from affecting the layout of the page.none: This value disables the overscroll behavior completely. It is useful when you want to prevent the user from scrolling beyond the boundaries of an element.Let's take a look at some code examples:
In this example, we have a scrollable div element with the overscroll-behavior property set to auto. This means that the browser will handle the overscroll behavior.
<div style="height: 200px; overflow-y: scroll; overscroll-behavior: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
</div>
In this example, we have a scrollable div element with the overscroll-behavior property set to contain. This means that the overscroll will not propagate to the parent element.
<div style="height: 200px; overflow-y: scroll; overscroll-behavior: contain;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
</div>
In this example, we have a scrollable div element with the overscroll-behavior property set to none. This means that the overscroll behavior is disabled.
<div style="height: 200px; overflow-y: scroll; overscroll-behavior: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Sed euismod, velit eget bibendum bibendum, velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
<p>Velit elit bibendum elit, vel bibendum elit elit vel elit.</p>
</div>
That's it! These are the three different values that you can use with the overscroll-behavior property. Try them out and see which one works best for your project.