Question

我正在尝试在悬停时更改滚动条的宽度。我能够改变背景颜色和其他CSS属性，但宽度很挑剔。如果我右键单击该元素并查看调试窗口 - 重绘并发现更宽的滚动条。是否有解决此问题的仅限CSS的解决方案？

div {
    width: 300px;
    height: 300px;
    overflow-y: scroll;
    background-color: blue;
}

/* Custom Webkit Scrollbar */
/* http://css-tricks.com/custom-scrollbars-in-webkit/ */
::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

div:hover::-webkit-scrollbar,
div:hover::-webkit-scrollbar-button,
div:hover::-webkit-scrollbar-track,
div:hover::-webkit-scrollbar-track-piece,
div:hover::-webkit-scrollbar-thumb,
div:hover::-webkit-scrollbar-corner {
    width: 40px !important;
    background-color: red !important;
}

::-webkit-scrollbar-track-piece {
    background-color: #efefef;
}

::-webkit-scrollbar-thumb:vertical {
    background-color: #666;
}

Answer 1

只需将事件更改为“滚动条的悬停”

即可

::-webkit-scrollbar-thumb:hover

DEMO

在悬停时更改webkit-scrollbar width时重绘问题

1 个答案: