如何使我的自定義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滾動條透明？

回答

相關問題