CSS overscroll-behavior-inline Property
Description
The overscroll-behavior-inline
CSS property is used to control the behavior of scrollable inline (horizontal) axes when content exceeds the container's dimensions. It allows developers to specify whether the browser should allow or prevent the browser's default overscroll behavior, such as the bounce effect on touch devices or the continued scrolling beyond the content boundaries. By setting this property to values like "auto," "contain," or "none," web designers can tailor the user experience to enhance or restrict the overscroll behavior within inline-scrolling containers, providing more control over the visual and interactive aspects of their web applications.
- Initial value
- auto
- Applies to
- non-replaced block-level elements and non-replaced inline-block elements
- Inherited
- no
- Computed value
- as specified
- Animatable
- discrete
- JavaScript syntax
- object.style.overscrolBehaviorInline
Syntax
overscroll-behavior-inline: auto | contain | none
Values
- autoThe default scroll overflow behavior occurs as normal.
- containDefault scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.
- noneNo scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.
Example
<main>
<div>
<div>
<p>
<code>overscroll-behavior-inline</code> has been used to make it so that
when the scroll boundaries of the yellow inner box are reached, the
whole page does not begin to scroll.
</p>
</div>
</div>
</main>
main {
height: 400px;
width: 3000px;
background-color: white;
background-image: repeating-linear-gradient(
to right,
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0, 0) 19px,
rgba(0, 0, 0, 0.5) 20px
);
}
main > div {
height: 300px;
width: 400px;
overflow: auto;
position: relative;
top: 50px;
left: 50px;
overscroll-behavior-inline: contain;
}
div > div {
height: 100%;
width: 1500px;
background-color: yellow;
background-image: repeating-linear-gradient(
to right,
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0, 0) 19px,
rgba(0, 0, 0, 0.5) 20px
);
}
p {
padding: 10px;
background-color: rgba(255, 0, 0, 0.5);
margin: 0;
width: 360px;
position: relative;
top: 10px;
left: 10px;
}
Browser Support
The following table will show you the current browser support for the CSS overscroll-behavior-inline
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 77 | 73 | 64 | 16 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
77 | 79 | 55 | 16 | 12 | 77 |
Last updated by CSSPortal on: 31st December 2023