Wenden Sie den Webkit-Bildlaufleistenstil auf das angegebene Element an

75

Ich bin neu in Pseudoelementen, denen ein Doppelpunkt vorangestellt ist. Ich bin auf einen Blog-Artikel gestoßen, in dem es um das Styling von Bildlaufleisten mit nur einem Webkit-CSS ging. Kann das Pseudoelement-CSS auf einzelne Elemente angewendet werden?

/* 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;
}

In dieser Geige möchte ich die Bildlaufleiste des Div anpassen, aber die Bildlaufleiste des Hauptfensters bleibt auf der Standardeinstellung.

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

css webkit pseudo-element

— mrtsherman
quelle

100

Ihre Idee war richtig. Die Notation div ::-webkit-scrollbarmit einem Leerzeichen danach divist jedoch dieselbe wie div *::-webkit-scrollbar; Dieser Selektor bedeutet "Bildlaufleiste eines beliebigen Elements im Inneren <div>". Verwenden Sie div::-webkit-scrollbar.

Siehe Demo unter http://jsfiddle.net/4xMUB/2/

— Duri
quelle

1

Achten Sie darauf, keinen Leerraum zwischen div und :: - webkit zu setzen. Ich habe einige Zeit gebraucht, um zu wissen, warum dies nicht funktioniert. Das Problem war der Leerraum.

— Mohammed Noureldin

36

Ich möchte eine Klassenauswahl für die Verwendung einer benutzerdefinierten Bildlaufleiste verwenden.

Irgendwie .foo::-webkitfunktioniert das nicht, aber ich habe herausgefunden, dass div.foo::-webkitdas funktioniert! Diese ## $$ * ## Pseudo-Dinge ....

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

— Michel Löhr
quelle

2

Cool, danke für den Tipp. Wahrscheinlich eine andere Sache, die an einem anderen Tag zwei Stunden meiner Zeit verschwendet hätte.

— Mrtsherman

Nicht mehr wahr

— Davi Lima

Das funktioniert! Es wurden mehrere Möglichkeiten versucht, um die Funktion von Webkit-Regeln innerhalb der Containerklasse zum Laufen zu bringen, aber durch Hinzufügen eines Element-Tags vor wird sie irgendwie korrekt angewendet.

— spiritworld

9

Sie können diese Regeln auch anhand der ID des Elements anwenden. Angenommen, die Bildlaufleiste eines Div muss mit der ID "myDivId" gestaltet werden. Dann können Sie Folgendes tun. Auf diese Weise können Sie verschiedene Stile für Bildlaufleisten verschiedener Elemente verwenden.

#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/

— Pratik Patel
quelle

Könnten Sie es auch auf den Klassennamen anwenden?

— URL87