I had trouble with this. I don't know what exactly triggers the latest Chrome to switch scrollbars on a desktop browser to overlay mode, but it was unnerving to me because it makes the page scroller look broken to an inexperienced user. The selected answer didn't seem to work in my version of Chrome on Lubuntu Linux 20.04.1, version 100.0.4896.127. So, over several hours, I painstakingly recreated the settings to Chrome's system defaults and yet something that works in both light and dark mode too. Note I'm only styling the BODY element's vertical scroller in this example, but you can adapt easily for horizontal scrollers as well as not just apply it to the BODY element.
BODY::-webkit-scrollbar
{
all:unset;
}
BODY::-webkit-scrollbar-button
{
display:block;
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
height: auto;
width: initial;
background-position: center 5px;
background-size:9px 7px;
image-rendering: pixelated;
background-repeat:no-repeat;
}
BODY::-webkit-scrollbar-button:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}
BODY::-webkit-scrollbar-button:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}
BODY::-webkit-scrollbar-button:vertical:start:increment,
BODY::-webkit-scrollbar-button:vertical:end:decrement
{
display:none;
}
BODY::-webkit-scrollbar-button:vertical:decrement
{
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='50,00 0,50 100,50'/></svg>");
}
BODY::-webkit-scrollbar-button:vertical:increment
{
background-position: center 6px;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='ButtonText'><polygon points='0,0 100,0 50,50'/></svg>");
}
BODY::-webkit-scrollbar-thumb
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.3);
border-left:2px solid rgba(255,255,255,0.3);
border-right:2px solid rgba(255,255,255,0.3);
}
BODY::-webkit-scrollbar-thumb:hover
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.5);
}
BODY::-webkit-scrollbar-thumb:active
{
box-shadow:inset 0px 0px 0px 20px rgba(128,128,128,0.7);
}
BODY::-webkit-scrollbar-track
{
background-color:ButtonFace;
box-shadow:inset 0px 0px 0px 20px rgba(255,255,255,0.3);
}
Extra Notes:
- Using the ButtonFace and ButtonText colors, you can have the scrollbar react to light and dark mode. However, that doesn't give you the varying levels of light and dark you need on the control. You'd think perhaps you could use a
filter:brightness(x); level or an opacity:x level to create your varying levels of light and dark on the control -- but those oddly don't work on these scrollbars. Instead, I found that that an inset box-shadow set on wide spread, and nothing else, with rgba colors, worked well.
- I found that setting
width:initial, plus height:auto, on the button alone was enough to set the width of the scrollbar control parts.
- I got the triangle SVGs from here. Note that I changed the
fill on those to ButtonText in order to make it work in browser dark and light modes.
- Note that I used
rgba(128,128,128,x) in some cases because starting from white or black with opacity created odd issues when switching light and dark modes, and so I chose the middle value with opacity to get around that.
- The
image-rendering:pixelated was very useful because otherwise the very tiny up and down triangle SVG icon would be antialiased so much that it would look too opaque. This allowed the SVG icon to maintain its darkness on light mode, and brightness on dark mode.
I filed this issue with the Chromium browser team to see if they can give us some reliable CSS to turn off overlay scrollbars on a given element, should we need that.
https://bugs.chromium.org/p/chromium/issues/detail?id=1333947
EDIT: Recently, I found that web server cache has something to do with the Google Chrome/Chromium/Edge Chromium browsers from somewhere around version 100+ at least here around 6/17/2022. When I turn on web server cache, any sub-page on a website going back to a previous page (as a regular relative link, not as a history.back(); call), will consistently show an overlay scrollbar instead of a fixed scrollbar. But if I force the page with an .htaccess rule that is a website cache buster, then the problem goes away and I see a scrollbar like normal.
v88) – Unpleasantness