The scrollbar-gutter CSS property is used to control the space between a scrollbar and the edge of its container. It specifies the width or space reserved for the scrollbar, allowing you to create a gutter or gap between the scrollbar and the content.
Here’s an example of how to use the scrollbar-gutter property:
.container {
scrollbar-gutter: auto;
}
In this example, the scrollbar-gutter property is applied to the .container element. The value auto indicates that the browser should automatically determine the size of the gutter based on its default styles and platform-specific guidelines.
The scrollbar-gutter property can also take the following values:
-
stable: Specifies a stable or fixed width for the scrollbar gutter, regardless of the presence or absence of a scrollbar. This value is not widely supported. -
always: Specifies a fixed width for the scrollbar gutter, even if there is no scrollbar visible. This value is not widely supported.
It’s important to note that browser support for the scrollbar-gutter property is limited, and its behavior may vary across different platforms and devices. Not all browsers support customizing the scrollbar gutter, and some may have their own default styles that cannot be overridden.
In summary, the scrollbar-gutter CSS property is used to control the space between a scrollbar and its container. However, browser support for this property is limited, and the behavior and appearance of the scrollbar gutter may vary across different platforms and devices. It’s recommended to test and consider fallback options if consistent cross-browser support is required.