Question

我只需要使用CSS自定义Chrome浏览器的滚动条的宽度，但需要做其他事情（例如悬停效果，悬停时的颜色，滚动条轨道颜色，滚动条按钮颜色等，单击时滚动条的颜色等）就这样。

我该怎么办？我知道我们可以使用以下CSS更改滚动条的宽度：

::-webkit-scrollbar {
    width: 12px;
}

Answer 1

你可以那样做

::-webkit-scrollbar用于整个滚动条

handle是滚动条，您可以在其中添加这样的背景，也可以应用pseudo elements或可拖动的滚动手柄。

track是滚动条的progress bar。

::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #1B242F; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #04C2C9; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
    background: #04C2; 
}

有关更多信息，请访问this链接

Chrome的默认滚动条的CSS

1 个答案: