将鼠标悬停在其上时如何更改-webkit-scrollbar宽度

Question

我想将滚动条的宽度更改为更宽，因此当用户将鼠标悬停在其上时，它看起来很清晰。

所以我写道：

::-webkit-scrollbar {
width: 7px;
height: 7px;
background-color: #ddd;
}
::-webkit-scrollbar:hover {
width: 10px;
height: 10px;
background-color: red;
}

背景颜色更改为红色，但宽度未更改，是否有解决方法？这是plnkr

Answer 1

border您可以通过使用而不是来实现这一点width：

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: #ababab;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box; // <== make the border work
}

::-webkit-scrollbar-thumb:hover{
    border: 0;
}

::-webkit-scrollbar-track {
    background: transparent;
}

Answer 2

*:hover::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

这将改变任何元素滚动条的宽度和高度。如果您想更具体，只需将“*”替换为您选择的选择器。例如，要将其应用于具有“my-custom-scrollbar”类的元素的滚动条：

.my-custom-scrollbar:hover::-webkit-scrollbar {
        width: 10px;
        height: 10px;
}