CSS 有没有办法在 webkit 浏览器中制作透明的自定义滚动条轨道？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14260114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to make transparent custom scrollbar track in webkit browsers?
提问by beardofzaius
I'm trying to style scrollbars which will appear on DIV's in a design I'm working on. It's webkit only so figured I could get quite a way with just CSS rather than plugins.
我正在尝试设计滚动条的样式，这些滚动条将出现在我正在处理的设计中的 DIV 上。它只是 webkit，所以我认为我可以通过 CSS 而不是插件来获得相当多的方法。
Unfortunately I've hit a major issue. The design requires the scrollbars to overlap the content with a transparent effect, much like OS X Mountain Lion / iOS.
不幸的是，我遇到了一个重大问题。该设计要求滚动条以透明效果重叠内容，很像 OS X Mountain Lion / iOS。
When custom styles are applied to the scrollbar however it resizes the content to fit the scrollbar in. I've managed to size the content so that in the inspector it shows its under the scrollbar now, but I can't seem to make the scrollbar track transparent.
当自定义样式应用于滚动条时，它会调整内容的大小以适应滚动条。我设法调整了内容的大小，以便在检查器中它现在显示在滚动条下方，但我似乎无法制作滚动条轨道透明。
I've tried applying these to both the ::-webkit-scrollbar and ::-webkit-scrollbar-track regions:
我已经尝试将这些应用于 ::-webkit-scrollbar 和 ::-webkit-scrollbar-track 区域：
- background:transparent
- transparent background color with rgba
- a background image with transparency
- 背景：透明
- 带有 rgba 的透明背景颜色
- 具有透明度的背景图像
None seem to work. Before I give up and try a JavaScript custom scrollbar solution, thought I'd see if anyone else had an answer.
没有一个似乎工作。在我放弃并尝试 JavaScript 自定义滚动条解决方案之前，我想看看其他人是否有答案。
* {
list-style:none;
margin:0;
padding:0;
}
body {
padding:20px;
}
#content {
background:#333;
height:400px;
padding:1px;
width:398px;
}
#content li {
background:#666;
height:100px;
margin-bottom:10px;
width:400px;
}
.scrollable-content {
overflow-x:hidden;
overflow-y:scroll;
}
.scrollable-content::-webkit-scrollbar {
background:transparent;
width:30px;
}
.scrollable-content::-webkit-scrollbar-track {
background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
background:#999;
}<ol class="scrollable-content" id="content">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>I've checked these already:
我已经检查过这些：
How to prevent a webkit-scrollbar from pushing over the contents of a div?
如何防止 webkit-scrollbar 推送 div 的内容？
回答by Mat Bloom
I've updated your fiddle example -> http://jsfiddle.net/F9p7S/
我已经更新了你的小提琴示例 - > http://jsfiddle.net/F9p7S/
Try this approach:
试试这个方法：
.scrollable-content::-webkit-scrollbar * {
background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
background:#999 !important;
}
