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

我设计了一个透明PNG格式的自定义webkit滚动条，但它在我的网站上并不透明。如何使我的自定义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/

来源

2012-08-02 Andrew Charlton

我使用的是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-02 15:44:15 Xhynk

嗯，我使用Chrome也和酒吧是可见的？好的，谢谢你的建议 – 2012-08-02 15:50:03

哦，我知道它为什么不适合你 - 我还没有添加在拇指呢！ – 2012-08-02 15:51:07

我会投入的真正拇指 - 目前的拇指只是暂时的 – 2012-08-02 15:52:39

一个透明的滚动条轨道是不可能的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-13 09:40:27

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

回答

相关问题