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