3

我在 webkit 的网页上设计了一些滚动条，我希望轨道是半透明的，这样一些背景图像就会流出来，但是当我插入一个 RGBa 值时，它就像一个 RGB 值一样对待它（没有任何阿尔法通道）。不::-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价值）

4

2 回答 2

4

查看我的垂直 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');
}

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

于 2012-12-23T19:59:41.367 回答
0

我很确定 webkit 确实支持 RGBa 值，我使用过body::-webkit-scrollbar-track{}它运行良好。

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

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

于 2012-12-23T20:01:57.560 回答