CSS3 ändert den Bildlaufleistenstil des Browsers

Hinweis: Diese Methode ist nur auf WebKit-basierte Browser anwendbar.

Die Bildlaufleiste des Browsers ist zu breit und hässlich, was die tägliche Entwicklung beeinträchtigt. Was soll ich tun?

Das Erscheinungsbild der Bildlaufleiste besteht aus zwei Teilen: 1. Der Gesamtschieber der Bildlaufleiste 2. Der Schieber innerhalb des Bildlaufleistenschiebers

In CSS besteht die Bildlaufleiste aus 3 Teilen

Name::-webkit-scrollbar //Allgemeine Bildlaufleiste Stilname::-webkit-scrollbar-track //Bildlaufleiste Trackname::-webkit-scrollbar-thumb //Interner Bildlaufleisten-Schieberegler

Hinweis: Bei den oben genannten drei handelt es sich um Pseudoklassen. Bitte ändern Sie den Namen in den Elementnamen, den Sie ändern möchten.

Beispiel: Ändern Sie den Bildlaufleistenstil der gesamten Seite

body::-webkit-scrollbar{ //Ändern Sie zuerst die Breite der Bildlaufleiste von body: 8px;

}

body::-webkit-scrollbar-track{//Ändere die Bildlaufleistenfarbe des Texthintergrunds: rgb(200, 200, 200);

Rahmenradius: 5px;

}

body::-webkit-scrollbar-thumb{//Ändern Sie abschließend den Stil des Bildlaufleisten-Folienhintergrunds des Hauptteils: rgb(120, 120, 120);

Rahmenradius: 5px;

}

◆ Die rechte Seite zeigt den Scrollbar-Stil, nachdem der obere Code geändert wurde

◆ Sie können dem Stil Hintergrund, Transparenz, Rahmen, abgerundete Ecken und andere Attribute hinzufügen, um den Browser schöner zu machen

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.