So überschreiben Sie die Bildlaufleiste nur für ein untergeordnetes Element

Question

Ich habe einige benutzerdefinierte Bildlaufleisten-Stile, die von externen CSS-Dateien kommen, auf die ich keine Kontrolle habe.

::-webkit-scrollbar { width: 5px; }

Ich möchte diese Scrollbar Arten Gewohnheit halten, aber es innerhalb eines Containerelement außer Kraft setzen. Ich habe versucht, es auf verschiedene Arten ohne Glück zu zielen.

#test::-webkit-scrollbar { width: 10px !important; }

http://jsfiddle.net/Lk5ct8ta/

Answer 1

Sie auf der body die Scrollbar zu sehen. Ihr div#test ist 2000px groß, wodurch der Textkörper überläuft. Der Textkörper erhält also die Bildlaufleiste, aber Ihre benutzerdefinierten Formatvorlagen sind div#test zugewiesen, die keinen übergelaufenen Inhalt enthält.

Zum Beispiel, hier div#test ist in Höhe und Überlauf reduziert Set mit mehr Inhalt zu blättern, ist es zu zwingen Inhalt überlaufen und die Scrollbar Arten anwenden:

div{ 
 
    height:200px; 
 
    overflow: scroll; 
 
} 
 

 
::-webkit-scrollbar { 
 
    width: 5px; 
 
} 
 
::-webkit-scrollbar-thumb { 
 
    background-color:#808080; 
 
} 
 

 
#test::-webkit-scrollbar { 
 
    width: 10px !important; 
 
} 
 

 
#test::-webkit-scrollbar-thumb { 
 
    background-color:red; 
 
}

<div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.</div>