Webkit 滚动条不接受 RGBa 值?

Question

我正在为webkit的网页设置一些滚动条的样式，我希望轨道是半透明的，以便一些背景图像渗出，但是当我插入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值)

Answer 1

查看我的垂直 jsfiddle 以使用垂直页面执行此操作。 我设置了一个带有背景图像的透明轨道，如下所示：

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

对于水平页面，请查看此水平小提琴。 与水平代码的区别在于我将页面设置为 100% 高度：

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

然后我将页面内容包装在一个div 中，这是滚动发生的地方，而不是在页面本身上，如下所示：

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

这是解决页面上的水平滚动似乎永远不会获得页面背景这一事实的解决方法，因此为了获得透明轨道，我们需要在页面中创建滚动。

Answer 2

我很确定webkit确实支持RGBa值，我已经使用了body::-webkit-scrollbar-track{}它工作得很好。

我还使用了 Jscroll 窗格插件，我发现它非常直观，它也支持 rgba 值。这也可以支持完整的网页自定义滚动条和IE 7 +。

是否可以查看您的代码以查看是否有任何问题？