有没有办法在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滚动条样式

如何防止webkit-scrollbar推送div的内容？

CSS:可以将Webkit滚动条"推送"到内容中吗？

Answer 1

我已经更新了您的小提琴示例-> http://jsfiddle.net/F9p7S/

试试这种方法：

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