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

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;
}