CSS 3 Bildlaufleiste - Padding und Cursor hinzufügen?

Question

Wie kann ich diese zwei Dinge auf der Bildlaufleiste hinzufügen?

1. Polsterung um die Scrollbar
2. ein Cursor, wenn Sie schweben die Scrollbar

Dies ist mein Code:

#style-4::-webkit-scrollbar-track 
    { 
     background-color: #fff; 
    } 

    #style-4::-webkit-scrollbar 
    { 
     width: 5px; 
     background-color: #fff; 

    } 

    #style-4::-webkit-scrollbar-thumb 
    { 
     background-color: #ccc; 

    } 

    #style-4::-webkit-scrollbar-thumb:hover 
    { 
     background-color: #666; 
     cursor: pointer; 
    } 

Sie können es sehen here. Ich möchte die Polsterung wie die auf cssdeck hinzufügen.

Ist es möglich?

Answer 1

Über diese Polsterung. Probe 5px Polsterung von links

#style-4::-webkit-scrollbar { 
    width: 10px; /* add 5px */ 
    ... 
} 

#style-4::-webkit-scrollbar-thumb { 
    box-shadow: inset 5px 0 0 0 white; /* change color to your bg color */ 
    ... 
} 

Hinzufügen cursor: pointer jedes -webkit-scrollbar Element leider nicht funktionieren.

Answer 2

Ja Sie können es hinzufügen.

#style-4:hover{ 
    padding:15px; 
} 

Ich denke, das ist richtig, wenn ich falsch liege, lassen Sie bitte wissen, was Sie erwarten.

Answer 3

Versuchen Sie dieses für Cursor

#style-4:hover{ 
    cursor:pointer; 
}