“Scrambled”webkit滚动条（尝试重现Google +的滚动条）

Question

我试图在我的网站上重现Google +的滚动条。出于原因，我无法弄清楚这个滚动条有时会​​出现乱码。通过加扰，我的意思是滚动条是多色的，有一条跨越它的黑线，scrollbar-thumb不可见。这是一个屏幕截图，向您展示我的意思：

这里有jsfiddle，不幸的是，滚动条看起来很正常，所以我无法重现我的问题。

我使用Twitter Bootstrap，如果这有助于思考我现有的CSS如何搞砸了。

Answer 1

这个用于滚动条的代码请参阅下面的代码：

::-webkit-scrollbar {
height: 16px;
overflow: visible;
width: 16px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.2);
background-clip: padding-box;
border: solid transparent;
border-width: 1px 1px 1px 6px;
min-height: 28px;
padding: 100px 0 0;
box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
::-webkit-scrollbar-button {
height: 0;
width: 0;
}

::-webkit-scrollbar-track {
background-clip: padding-box;
border: solid transparent;
border-width: 0 0 0 4px;
}