scrollbar-gutter

Description
Syntax
Examples
Links

Description

The scrollbar-gutter property for CSS gives control to the author over the presence of scrollbar gutters separately from the ability to control the presence of scrollbars provided by the overflow property.

Syntax

CSS

scrollbar-gutter: value;

JS

object.style.scrollbarGutter = "value";

Values

<'scrollbar-gutter'> = auto | stable && both-edges?

auto

Automatically specified by the user agent.

stable

The scrollbar gutter is present for classic scrollbars when overflow is hidden, scroll, or auto, regardless of whether the box is actually overflowing.

both-edges

If a scrollbar gutter would be present on one of the inline start edge or the inline end edge of the box, another scrollbar gutter must be present on the opposite edge as well.

Initial

auto

Examples

1 · auto

2 · stable

3 · both-edges

<!doctype html>
<html>
<head>
    <style>
        p
        {
            background-color: yellow;
            overflow-y: auto;
            scrollbar-gutter: stable both-edges;
        }
    </style>
</head>
<body>
    <p>both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges both-edges</p>
</body>
</html>

4 · JS

<!doctype html>
<html>
<head>
    <style>
        p
        {
            background-color: yellow;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>auto</button>
    <button>stable</button>
    <button value="stable both-edges">both-edges</button>
    <p>s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r s c r o l l b a r - g u t t e r</p>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            document.querySelector("p").style.scrollbarGutter = myproperty;
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>