webkit css滚动条样式答案

【问题标题】：webkit css scrollbar stylingwebkit css滚动条样式
【发布时间】：2011-11-05 16:20:41
【问题描述】：

有没有办法完全摆脱滚动轨道？还是让它覆盖内容而不是将其推到一边？喜欢 iOS/Lion 滚动条？

以下内容非常接近，但即使轨道是透明的，可滚动区域的内容也会被推过，并且页面背景会显示出来。

::-webkit-scrollbar {  
    width:8px;
    height:8px;
    -webkit-border-radius: 4px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background-color:transparent;
}

::-webkit-scrollbar-thumb {  
    background-color: rgba(053, 057, 071, 0.3);
    width: 6px;
    height: 6px;
    -webkit-border-radius:4px;
}

【问题讨论】：

为什么不使用自定义滚动条，比如基于 jQuery 的jScrollPane？如果需要，您可以设置样式以覆盖内容。
我已经尝试过 jScrollPane，以及我自己的一些使用 css3 翻译、css 位置等的解决方案......没有一个比实际滚动条快。对于已经内置在浏览器中的东西来说，这似乎是很多额外的开销。如果可以使用现有的滚动条而不是一些假冒的 javascript，那似乎是一个更好的主意。
我发现 baijs.nl/tinyscrollbar 工作得很好，而且速度很快（就内容对滚动的响应而言）并且很容易设置。
您可以在滚动条出现的任何地方将 margin-right 设为 -8px。虽然这更像是一种黑客方式，但它应该能让你继续前进。

标签： css webkit browser-scrollbars

【解决方案1】：

嗯，我以为我以前回答过这个，也许不是：

隐藏body上的溢出
用 div 包裹网站的全部内容或您正在滚动的任何内容，
为 div（溢出：滚动或溢出-y：滚动）。

现在您可以使用 rgba(0,0,0,0.3) 将轨道 css 设置为任何不透明度，因为滚动不是身体的一部分。

如果您想进行实验，自定义 Firefox 滚动条的另一个技巧是：

做溢出的事情并用你喜欢的任何颜色的透明 div 覆盖滚动条（通过 z-index），
将 div 定位在整个滚动部分上（可能类似于 position:absolute; right:0; 如果您在整个窗口中使用滚动）
使用指针事件：无；在 div css 上使其半透明。

它会给 Firefox 滚动条添加一点颜色/纹理。（为了比较，强制向右滚动可能是理想的）

我还没有尝试过，但它是可行的

【讨论】：

我不确定我理解你的意思。看看这个 plunk：plnkr.co/edit/hbBT0lehOHlD0cizHmVn?p=preview。我想要做的是让红色段落一直适合右边，蓝色滚动拇指漂浮在它们上面。如果我也可以将蓝色滚动拇指从边缘拉开一点，那就更好了。