有没有办法在webkit浏览器中制作透明的自定义滚动条轨道？

Question

我正在尝试设置滚动条，这些滚动条将出现在我正在进行的设计中的DIV上。这只是webkit，所以我觉得我可以通过CSS而不是插件获得很好的方式。

不幸的是，我遇到了一个重大问题。该设计要求滚动条与透明效果重叠内容，就像OS X Mountain Lion / iOS。

当自定义样式应用于滚动条时，它会调整内容的大小以适应滚动条。我已设法调整内容的大小，以便在检查器中它现在显示在滚动条下，但我似乎无法使滚动条轨道透明。

我尝试将这些应用于:: - webkit-scrollbar和:: - webkit-scrollbar-track区域：

• 背景：透明
• 透明背景色与rgba
• 具有透明度的背景图片

似乎无效。在我放弃并尝试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>

我已经检查了这些：

webkit css scrollbar styling

How to prevent a webkit-scrollbar from pushing over the contents of a div?

CSS: Possible to "push" Webkit scrollbars into content?

Answer 1

我已经更新了你的小提琴示例 - ＆gt; http://jsfiddle.net/F9p7S/

尝试这种方法：

.scrollable-content::-webkit-scrollbar * {
    background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
    background:#999 !important;
}