CSS scrollbar-gutter Property
Description
The scrollbar-gutter
CSS property is a relatively new addition to web design that allows developers to control the space taken up by scrollbars in scrollable elements, such as divs with overflow. It offers three possible values: "auto," which retains the default behavior where the scrollbar is overlaid on the content; "stable," which reserves space for the scrollbar, preventing content from shifting when it appears or disappears; and "always," which ensures that space for the scrollbar is always reserved, even when it's not visible. This property enhances the predictability and aesthetics of web layouts, particularly when dealing with dynamic content that may trigger scrollbar appearance. However, browser support for this property may vary, so it's essential to check compatibility before implementing it in production websites.
- Initial value
- auto
- Applies to
- scrolling boxes
- Inherited
- no
- Computed value
- as specified
- Animatable
- discrete
- JavaScript syntax
- object.style.scrollbarGutter
Syntax
scrollbar-gutter: auto | stable && both-edges?
Values
- autoThe initial value. Classic scrollbars create a gutter when overflow is scroll, or when overflow is auto and the box is overflowing. Overlay scrollbars do not consume space.
- stableWhen using classic scrollbars, the gutter will be present if overflow is auto, scroll, or hidden even if the box is not overflowing. When using overlay scrollbars, the gutter will not be present.
- both-edgesIf a gutter would be present on one of the inline start/end edges of the box, another will be present on the opposite edge as well.
Example
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
earthnut pea peanut soko zucchini.
</div>
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #007 #bada55;
scrollbar-gutter: stable both-edges;
}
Browser Support
The following table will show you the current browser support for the CSS scrollbar-gutter
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
94 | 94 | 97 | 80 | x |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
94 | 97 | 66 | x | 17 | 94 |
Last updated by CSSPortal on: 31st December 2023