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