weißen Ecken Webkit-Scrollbar

Question

Fiddle

I ::-webkit-scrollbar bin mit einem benutzerdefinierten Scrollbar in Chrome zu machen. Ich habe einen border-radius: 10px und dabei gibt es weiße Ecken an der Spitze:

Sorry, es ist irgendwie schwer zu sehen, da es sich um eine Scrollbar ist.

Ich möchte die Ecken die gleiche Farbe wie der Header div (#dadae3) haben. Gibt es eine Möglichkeit, die weißen Ecken nur mit CSS zu entfernen, ohne die Stile der Bildlaufleiste zu ändern?

CSS (gesamt):

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

Sie müssen das ::-webkit-scrollbar-corner Pseudo-Element, z.

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

Answer 2

Sie können die background-color Eigenschaft für das Pseudoelement -webkit-scrollbar, tun, dass Sie die "Ecke Farbe" einstellen.