14

我正在尝试设计将出现在 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 滚动条“推送”到内容中吗？

4

1 回答 1

4

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

试试这个方法：

.scrollable-content::-webkit-scrollbar * {
    background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
    background:#999 !important;
}
于 2013-09-17T21:10:10.627 回答