CSS-Beispielcode zum Festlegen des Bildlaufleistenstils

Der CSS-Implementierungscode zum Festlegen des Bildlaufleistenstils lautet wie folgt:

•::-webkit-scrollbar Die gesamte Bildlaufleiste
•::-webkit-scrollbar-thumb Das kleine Quadrat in der Bildlaufleiste kann nach oben und unten verschoben werden (oder nach links oder rechts, je nachdem, ob es sich um eine vertikale oder horizontale Bildlaufleiste handelt).
•::-webkit-scrollbar-track Die Spur der Bildlaufleiste (mit Daumen darin)
•::-webkit-scrollbar-button Mit den Schaltflächen an beiden Enden der Bildlaufleiste können Sie die Position des kleinen Quadrats durch Klicken feinabstimmen.
•::-webkit-scrollbar-track-piece Innere Spur, der mittlere Teil der Bildlaufleiste (entfernt)
•::-webkit-scrollbar-corner Die Ecke, wo die beiden Bildlaufleisten zusammentreffen
•::-webkit-resizer Ein kleines Steuerelement am Schnittpunkt zweier Bildlaufleisten zum Ändern der Größe eines Elements durch Ziehen

/*Definieren Sie die Höhe und Breite der Bildlaufleiste und die Höhe und Breite des Hintergrunds entsprechend der Größe der horizontalen und vertikalen Bildlaufleiste*/
::-WebKit-Bildlaufleiste
{
    Breite: 16px;
    Höhe: 16px;
    Hintergrundfarbe: #F5F5F5;
}
/*Definieren Sie den inneren Schatten + die abgerundeten Ecken der Bildlaufleiste*/
::-WebKit-Bildlaufleiste-Spur
{
    -webkit-box-shadow: Einschub 0 0 6px rgba(0,0,0,0,3);
    Rahmenradius: 10px;
    Hintergrundfarbe: #F5F5F5;
}
/*Definieren Sie den inneren Schatten + die abgerundeten Ecken des Schiebereglers*/
::-Webkit-Scrollbar-Daumen
{
    Rahmenradius: 10px;
    -webkit-box-shadow: Einschub 0 0 6px rgba(0,0,0,.3);
    Hintergrundfarbe: #555;
}

Detaillierte Einstellungen

Beim Definieren von Bildlaufleisten werden Pseudoelemente und Pseudoklassen verwendet. Was also sind Pseudoelemente und Pseudoklassen?

Jeder sollte mit Pseudoklassen vertraut sein: link, :focus, :hover. Darüber hinaus wurden CSS3 viele Pseudoklassenselektoren hinzugefügt, wie :nth-child, :last-child, :nth-last-of-type() usw.

Sie haben in CSS schon Pseudoelemente gesehen: :first-line, :first-letter, :before, :after. Anschließend wurden in CSS3 die Pseudoelemente angepasst und auf der bisherigen Basis ein „:“ hinzugefügt, d.h. es lautet nun „::first-letter,::first-line,::before,::after“, außerdem wurde in CSS3 noch ein „::selection“ hinzugefügt. Zwei "::" und ein ":" werden in CSS3 hauptsächlich verwendet, um Pseudoklassen und Pseudoelemente zu unterscheiden.

Die Implementierung von Pseudoklassen und Pseudoelementen durch Webkit ist sehr leistungsstark. Die Bildlaufleiste kann als Seitenelement definiert und mit einigen erweiterten CSS3-Eigenschaften wie Farbverläufen, abgerundeten Ecken, RGBa usw. kombiniert werden. Wenn Sie dann an einigen Stellen Bilder verwenden müssen, können Sie die Bilder in Base64 konvertieren. Andernfalls müssen Sie jedes Mal mehrere Bilder laden, was die Anzahl der Anfragen erhöht.

Es können beliebige Objekte festgelegt werden: Rahmen, Schatten, Hintergrundbild usw. Die erstellte Bildlaufleiste führt weiterhin ihr interaktives Verhalten entsprechend den Einstellungen des Betriebssystems selbst aus. Auf die oben genannten Pseudoelemente können folgende Pseudoklassen angewendet werden. Es ist ein bisschen kompliziert. Sie können sich die erste Demo ansehen, um Einzelheiten zum Schreiben zu erfahren. Dort gibt es auch Kommentare.

:horizontal
//Die horizontale Pseudoklasse gilt für alle horizontalen Bildlaufleisten: vertikal
//Die vertikale Pseudoklasse gilt für alle vertikalen Bildlaufleisten: decrement
//Die Dekrement-Pseudoklasse gilt für Schaltflächen und Gleisstücke. Eine Schaltfläche oder ein Spurfragment, das eine Dekrementierung darstellt, z. B. eine Region oder eine Schaltfläche, mit der eine Region nach oben oder rechts verschoben werden kann: Inkrement
//Die inkrementelle Pseudoklasse gilt für Schaltflächen und Schienenstücke. Zeigt eine inkrementelle Schaltfläche oder ein Spurfragment an, z. B. eine Region oder eine Schaltfläche, mit der eine Region nach unten oder nach links verschoben werden kann: Start
//Die Start-Pseudoklasse gilt für Schaltflächen und Gleisstücke. Gibt an, ob das Objekt (Button-Track-Fragment) vor dem Slider platziert wird: Ende
//Ende der Pseudoklasse, gilt für Schaltflächen und Gleisstücke. Gibt an, ob das Objekt (Button-Track-Fragment) hinter dem Slider platziert wird: Doppel-Button
//Die Pseudoklasse „Doppeltaste“ gilt sowohl für Tasten als auch für Gleisstücke. Bestimmt, ob die Spur an einem Tastenpaar endet. Das heißt, der Weltraumschrott liegt als Knopfpaar nebeneinander.
:Einzelknopf
//Die Einzelknopf-Pseudoklasse gilt sowohl für Knöpfe als auch für Gleisstücke. Bestimmt, ob das Ende der Spur eine Schaltfläche ist. Das heißt, die Orbitalfragmente liegen neben einem separaten Knopf.
:kein-Knopf
Die Pseudoklasse „no-button“ gibt an, dass sich am Ende der Spur kein Button befindet.
:Ecke vorhanden
//Die Pseudoklasse „corner-present“ gibt an, ob die Ecke der Bildlaufleiste vorhanden ist.
:Fenster-inaktiv
//Gilt für alle Bildlaufleisten und gibt den Bereich an, der die Bildlaufleiste enthält, wenn der Fokus nicht auf dem Fenster liegt.
::-webkit-scrollbar-track-piece:start {
/* Bildlaufleiste obere oder linke Hälfte */
}
::-webkit-scrollbar-thumb:Fenster-inaktiv {
/*Wenn der Fokus nicht im aktuellen Bereichsschiebereglerzustand liegt*/
}
::-webkit-scrollbar-button:horizontal:dekrementieren:hover {
/*Zustand, wenn sich die Maus auf der Schaltfläche unter der horizontalen Bildlaufleiste befindet*/
}

Zusammenfassen

Oben sehen Sie den vom Editor eingeführten Beispielcode zum Festlegen des Bildlaufleistenstils mit CSS. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!