Javascript 更改悬停时webkit滚动条宽度时的重画问题

我正在尝试更改悬停时滚动条的宽度。我可以改变背景颜色和其他CSS属性，但宽度很复杂。如果我右键单击该元素并查看调试窗口，就会出现一个重画，我会看到一个更宽的滚动条。是否有解决此问题的唯一css解决方案

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

---

因为内容没有溢出？我在您的

中添加了较大的内容，悬停行为似乎工作正常：但我在元素上有overflow-y:scroll？我不明白为什么div中需要有内容。

webkit

不应该在Chrome中工作。这是Safari技术，当然是。选中此项：

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;
}

::-webkit-scrollbar-thumb:hover