beyaz köşeler webkit-kaydırma çubuğu Chrome'da bir özel kaydırma çubuğunu yapmak <code>::-webkit-scrollbar</code> kullanıyorum

Question

Fiddle

. bunun bir kaydırma çubuğu beri görmek biraz zor,

Maalesef: Bir border-radius: 10px var ve bunu yaparken de, üstteki beyaz köşeler vardır.

I köşeler başlık div (#dadae3) ile aynı renkte istiyoruz. CSS kullanarak kaydırma çubuğunun stillerini değiştirmeden sadece beyaz köşelerden kurtulmanın bir yolu var mı?

CSS (tamamı):

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> 

Answer 1

, ör ::-webkit-scrollbar-corner yalancı elemanı ayarlamak zorunda

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

Answer 2

Sen "köşe rengini" ayarlayabileceğini yapıyor, sözde elemanı -webkit-scrollbar için background-color özelliğini ayarlayabilirsiniz.