Zastosuj styl paska przewijania do podanego elementu

Question

Jestem nowy w pseudoelementach z prefiksem podwójnym dwukropkiem. Natknąłem się na artykuł na blogu omawiający stylizację pasków przewijania za pomocą jakiegoś css. Czy pseudoelement CSS może być zastosowany do poszczególnych elementów?

/* This works by applying style to all scroll bars in window */ 
::-webkit-scrollbar { 
    width: 12px; 
} 

/* This does not apply the scrollbar to anything */ 
div ::-webkit-scrollbar { 
    width: 12px; 
} 

W tym skrzydle chciałbym dostosować pasek przewijania div, ale pasek przewijania głównego okna pozostaje domyślny.

http://jsfiddle.net/mrtsherman/4xMUB/1/

Answer 1

Twój pomysł był prawidłowy. Jednak oznaczenie div ::-webkit-scrollbar z odstępem po div jest w rzeczywistości takie samo jak div *::-webkit-scrollbar; ten selektor oznacza "pasek przewijania dowolnego elementu wewnątrz <div>". Użyj div::-webkit-scrollbar.

Zobacz demo na http://jsfiddle.net/4xMUB/2/

Answer 2

chcę użyć selektora klasy za korzystanie z niestandardowego paska przewijania.

Jakoś .foo::-webkit nie działa, ale doszedłem do wniosku, że działa div.foo::-webkit! Tych ## $$ * ## pseudo-rzeczy ....

Zobacz http://jsfiddle.net/QcqBM/16/

Answer 3

Można również stosować te zasady przez id elementu. Powiedzmy, że pasek przewijania div musi być stylizowany, który ma id "myDivId". Następnie możesz wykonać następujące czynności. W ten sposób możesz używać różnych stylów dla pasków przewijania różnych elementów.

#myDivId::-webkit-scrollbar { 
    width: 12px; 
} 

#myDivId::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 

#myDivId::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 

http://jsfiddle.net/QcqBM/516/