Comment faire :: - webkit-scrollbar-thumb plus petit?

Question

Je personnalise la barre de défilement par CSS3. Et je ne sais pas, comment faire scrollbar-pouce plus petit (plus court). La largeur ou la hauteur ne fonctionnent pas. Quelqu'un peut-il m'aider?

#parent { 
 
    width: 300px; 
 
    height: 300px; 
 
    padding: 20px; 
 
    overflow: auto; 
 
} 
 

 
#child { 
 
    width: 250px; 
 
    height: 1000px; 
 
    margin: 0 auto; 
 
    border: 2px solid #8c1b21; 
 
} 
 

 
#parent::-webkit-scrollbar { 
 
    width: 15px; 
 
    background-color: #B79889; 
 
    border-radius: 5px; 
 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
} 
 

 
#parent::-webkit-scrollbar-thumb { 
 
    background-color: #8c1b21; 
 
    border-radius: 5px; 
 
}

<div id="parent"> 
 
    <div id="child"></div> 
 
</div>

Answer 1

Hauteur du pouce dépend de la hauteur du div où vous postulez scroll

#parent { 
 
    width: 300px; 
 
    height: 300px; 
 
    padding: 20px; 
 
    overflow: auto; 
 
} 
 

 
#child { 
 
    width: 250px; 
 
    height: 4000px; 
 
    margin: 0 auto; 
 
    border: 2px solid #8c1b21; 
 
} 
 

 
#parent::-webkit-scrollbar { 
 
    width: 10px; 
 
    background-color: #B79889; 
 
    border-radius: 5px; 
 
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
} 
 

 
#parent::-webkit-scrollbar-thumb { 
 
    background-color: #8c1b21; 
 
    border-radius: 5px; 
 
}

<div id="parent"> 
 
    <div id="child"></div> 
 
</div>