0

我设计了一个透明 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/

4

2 回答 2

5

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;
}
于 2012-11-13T09:40:27.960 回答
1

我正在使用 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 使栏透明。试着让你的图像只有一个黑暗的背景，而不是透明的。它会比白色不那么明显

于 2012-08-02T15:44:15.590 回答