Question

我设计了一个透明png格式的自定义webkit滚动条，但它在我的网站上不透明。

有什么方法可以让左边缘透明吗？

这是我的代码：

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: transparent url(images/backgrounds/scrollbar.png) repeat-y;
}


::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

网址网址为：http://captainjackspiratepartys.co.uk/

Answer 1

Body元素无法使用透明滚动条轨道，但我注意到Div元素是可能的。你可以做的是创建一个包装Div并将你的内容放在那里，而不是将内容直接放入正文部分。

样品：

::-webkit-scrollbar-track {
    /*no code needed here*/
}
div#wrapper{
    overflow:auto;
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
body{
    overflow:hidden;
}

Answer 2

我正在使用Chrome，你的酒吧对我不起作用，我不得不使用：

::-webkit-scrollbar-track-piece:start{
     background: transparent url(images/backgrounds/scrollbar.png) repeat-y !important;
}

::-webkit-scrollbar-track-piece:end{
    background: transparent url(images/backgrounds/scrollbar.png) repeat-y !important;
}

另外，我不相信你实际上可以只用css使条形透明。而不是透明，尝试使您的图像只有一个黑暗的背景。它不如白色

如何使我的自定义webkit滚动条透明？

2 个答案: