白色四角WebKit的滾動條

我使用::-webkit-scrollbar使在Chrome中的自定義滾動條。我有一個border-radius: 10px並在這樣做，也有白色的角落在頂部：

It's kinda hard to see

對不起，這是有點難以看到，因爲它是一個滾動條。

我希望角落的顏色與標題div相同（#dadae3）。有沒有什麼方法可以在不改變滾動條樣式的情況下使用CSS來擺脫白色角落？

CSS（整個）：

body { 
    padding: 0; 
    margin: 0 
} 
::-webkit-scrollbar { 
    width: 13px; 
} 
::-webkit-scrollbar-track { 
    background: #ffffff; 
    border-radius: 10px; 
    border: 1px solid #aeaeb5 
} 
::-webkit-scrollbar-thumb { 
    background: #dadae3; 
    border-radius: 10px; 
    border: 1px solid #aeaeb5 
} 
::-webkit-scrollbar-thumb:hover { 
    background: #c4c4cc 
} 
::-webkit-scrollbar-thumb:active { 
    background: #aeaeb5 
}

HTML：

<div style='background: #dadae3; width: 100%; height: 30px;'></div> 
<div style='width: 100%; height: 1000px'></div>

來源

2013-11-27 Joe P.

您必須設置::-webkit-scrollbar-corner僞元素，例如，

::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }

來源

2015-01-21 20:11:08

這應該被接受：即使它晚了1年，它也可以解決我在鍍鉻問題43 – Antoine

謝謝你。儘管我放棄了這個項目，但它仍然非常有幫助 –

您可以設置background-color屬性爲僞元素-webkit-scrollbar，這樣做，你可以設置「角色」。

來源

2013-11-27 02:56:00

是的，這個工程。但是當你向下滾動時，它會顯示「＃dadae3」與白色相對。我會將背景顏色設置爲透明嗎？編輯：不，我不會把背景顏色設置爲透明。這也顯示爲白色的角落。 –

它已經是透明的（嘗試給fiddler的輸出iframe賦予背景顏色），但請記住：它是一個滾動條。如果有什麼東西落在它後面，它會觸發滾動，所以不會有東西在背後。 –

好的，我懷疑有人會注意到滾動條上的灰色角落。附：這可能很快會在現場（只要我的服務器工作>：D） –

白色四角WebKit的滾動條

回答

相關問題