在悬停时更改webkit滚动条宽度时重绘问题 [英] Redraw issue when changing webkit-scrollbar width on hover

问题描述

我试图改变悬停时滚动条的宽度。我能够改变背景颜色和其他CSS属性，但宽度很挑剔。如果我右键单击元素并查看调试窗口 - 发生重绘，并且看到更宽的滚动条。有没有解决这个问题的CSS只有解决方案？

I am trying to change the width of a scrollbar on hover. I am able to change background color and other CSS properties, but width is fussy. If I right click the element and view the debug window -- a redraw occurs and I see a wider scrollbar. Is there a css-only solution to fixing this issue?

http://jsfiddle.net/7j2H2/17 /

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

推荐答案

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

Just change event to the "hover of the scrollbar"

::-webkit-scrollbar-thumb:hover

DEMO

这篇关于在悬停时更改webkit滚动条宽度时重绘问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！