The scrollbar-gutter CSS property 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.
object.style.scrollbarGutter = "value";
<'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.
<!doctype html>
<html>
<head>
<style>
p
{
background-color: yellow;
overflow-y: auto;
scrollbar-gutter: stable;
}
</style>
</head>
<body>
<p>stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable stable</p>
</body>
</html>
<!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>
<!doctype html>
<html>
<head>
<style>
p
{
background-color: yellow;
overflow-y: auto;
}
</style>
</head>
<body>
<button onmouseover="myfunction(innerHTML)">initial</button>
<button onmouseover="myfunction(innerHTML)">auto</button>
<button onmouseover="myfunction(innerHTML)">stable</button>
<button onmouseover="myfunction(value)" 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)
{
document.querySelector("p").style.scrollbarGutter = myparameter;
}
</script>
</body>
</html>
<!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)
{
document.querySelector("p").style.scrollbarGutter = myparameter;
}
const myelements = document.querySelectorAll("button");
for(let myelement of myelements)
{
let myargument = myelement.innerHTML;
if(myelement.value)
{
myargument = myelement.value;
}
myelement.addEventListener("mouseover", function(){myfunction(myargument)});
}
</script>
</body>
</html>