css - 如何使我的自定义 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;
}