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

使用垂直页面检查我的vertical jsfiddle。我设置了一个带有背景图像的透明轨道，其中包含以下内容：

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

对于横向页面，请结帐horizontal fiddle。与水平代码的区别在于我将页面设置为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 pane plugin，我发现它非常直观，这也支持rgba值。这也可以支持完整的网页自定义滚动条和IE 7+。

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

Webkit Scrollbars不接受RGBa值？

2 个答案: