Webkit滚动条不接受RGBa值？

Question

我是一个网页上的滚动条进行样式设计，希望轨道是半透明的，这样一些背景图像会渗透出来，但是当我插入RGBa值时，它就像处理RGB值一样（没有任何alpha通道）。 ::-webkit-scrollbars 不接受RGBa吗？我知道它不接受任何类似于transitions的东西，所以WebKit是否也放弃了其他酷炫的效果？

代码：

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: rgba(57,57,57, .6);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}

（但是 - 就我而言 - 它将rgba视为普通的rgb值）

- ModernDesigner

Answer 1

请查看我的垂直jsfiddle，了解如何在垂直页面上实现此操作。我使用以下代码设置了一个带有背景图像的透明轨道：

::-webkit-scrollbar-track {
    background: rgba(57,57,57, .6);;
}

对于水平页面，请查看水平代码片段。与水平代码的不同之处在于，我将页面设置为100％高度：

body, html, .scrolls {
    height: 100%;   
}

然后我将页面内容包裹在一个div中，这个div是滚动发生的地方，而不是页面本身，就像这样：

.scrolls { 
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
    background-image: url('http://www.evokia.com/images/large-background.jpg');
} 

这是解决页面水平滚动条永远不会获取页面背景的方法，所以为了获得透明的轨道，我们需要在页面中创建滚动条。

- Sean Keating

---

这与我想要的类似，但它使用 box-shadow 添加颜色，而我希望我的滚动条只是纯色的。 - ModernDesigner

更像你正在寻找的东西吗？ - Sean Keating

你看到了一个白色的水平轨道，对吧？我也看到了。 http://jsfiddle.net/YbrX3/69/ - Sean Keating

没错，就是这样。但为什么之前不行呢？它基本上是一样的东西。 - ModernDesigner

我整理了这个代码片段并在上面添加了解决方案的描述。 - Sean Keating

Answer 2

我非常确定WebKit支持RGBA值，我已经使用了body::-webkit-scrollbar-track{}并且它运作良好。

我还使用过Jscroll pane插件，我发现它非常直观，也支持RGBA值。它还可以支持完全自定义的网页滚动条以及IE 7+。

能否查看您的代码，看看是否有任何问题？

- dev

---

哦，我和jScrollPane有一段不太愉快的历史。我真的不喜欢使用那个插件。 :P - ModernDesigner