我遇到了问题。我不知道是什么触发了最新版本的Chrome将桌面浏览器的滚动条切换到重叠模式,但这使得页面滚动条看起来对于一个没有经验的用户来说有些错乱。所选答案似乎在我的Lubuntu Linux 20.04.1上的Chrome版本100.0.4896.127中无法工作。因此,在几个小时内,我费力地将设置重新创建为Chrome的系统默认值并且还要能够在浅色和深色模式下使用。请注意,我只在此示例中为BODY元素的垂直滚动条设置样式,但是你可以轻松地适应水平滚动条以及不仅仅将其应用于BODY元素。
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);
}
额外说明:
- 使用ButtonFace和ButtonText颜色,您可以使滚动条针对浅色和深色模式做出反应。然而,这并不能为控件提供所需的不同程度的明亮和暗淡。你可能认为你可以使用
filter:brightness(x);
级别或者opacity:x
级别在控件上创建不同程度的明亮和暗淡 -- 但是这些奇怪地不起作用在这些滚动条上。相反,我发现在宽范围上设置一个插入的box-shadow
以及仅有rgba颜色,就能很好地解决问题。
- 我发现仅在按钮上设置
width:initial
和height:auto
就足以设置滚动条控制部分的宽度。
- 我从这里获取了三角形SVG图形。请注意,我更改了这些图形的
fill
来适应浏览器的深色和浅色模式。
- 请注意,我在某些情况下使用
rgba(128,128,128,x)
,因为从白色或黑色开始使用不透明度会在切换浅色和深色模式时产生奇怪的问题,所以我选择了中等值和不透明度来解决这个问题。
image-rendering:pixelated
非常有用,因为否则非常小的上下三角形SVG图标将被反锯齿处理得太多,看起来太不透明。这允许SVG图标在浅色模式下保持其暗度,在深色模式下保持其亮度。
我向Chromium浏览器团队提交了此问题,以便他们可以给我们一些可靠的CSS,以关闭给定元素上的覆盖滚动条,如果需要的话。
https://bugs.chromium.org/p/chromium/issues/detail?id=1333947
编辑: 最近,我发现Web服务器缓存与Google Chrome / Chromium / Edge Chromium浏览器存在某种关系,从100+版本开始至少在6/17/2022。当我打开Web服务器缓存时,任何一个子页面在网站上返回到上一个页面(作为一个常规相对链接,而不是history.back();
调用),将始终显示覆盖式滚动条而不是固定式滚动条。但是,如果我强制该页面使用网站缓存破坏器的.htaccess规则,则问题消失,并且我可以看到正常的滚动条。
* ::-webkit-scrollbar: {all: unset! Important}
添加到 https://www.youtube.com 样式表中。滚动条将不会恢复,而是消失。 - phil294