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
Edge Chrome Firefox Opera Safari
94949780x
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
949766x1794

Last updated by CSSPortal on: 31st December 2023