“Scrambled” webkit 滚动条（试图重现 Google+ 的滚动条）答案

【问题标题】："Scrambled" webkit scrollbar (trying to reproduce Google+'s scrollbar)“Scrambled” webkit 滚动条（试图重现 Google+ 的滚动条）
【发布时间】：2012-05-20 08:55:03
【问题描述】：

我正在尝试在我的网站上重现 google+ 的滚动条。由于某些原因，我有时无法弄清楚这个滚动条的外观是混乱的。打乱，我的意思是滚动条是多色的，有一条黑线跨越它，scrollbar-thumb 不可见。这是一个屏幕截图，向您展示我的意思：

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

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

【问题讨论】：

我认为它是 webkit 中的一个错误。我在许多 css3 函数中看到过类似的东西。（尤其是box-shadow）
@Teak，那么为什么 google+ 网站和我的 jafiddle 在我的同一个浏览器上看起来不错？一定是某种规则冲突？
可能，但这仍然是一个错误。你不应该在屏幕截图中看到什么。我只是间歇性地遇到这个问题。
是的，它是间歇性的，但这仍然意味着滚动条此时无法使用，我对 box-shadow 没有问题，再次非常奇怪/烦人
当我遇到问题时，是在鼠标悬停时更改box-shadow。这让我相信它与 Webkit 处理 css3 动画的方式有关，或者可能与加载后发生变化的任何 css3 有关。不幸的是，我从未解决我的问题，并在与它斗争了几个小时后放弃了。

标签： css webkit scrollbar pseudo-class

【解决方案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;
}

【讨论】：