Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)

Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)

Ich habe viele Projekte geschrieben, bei denen der Standardstil der Bildlaufleiste geändert werden muss, und ich möchte keine Plug-Ins separat herunterladen und einführen. Daher ändere ich den Stil der Standardbildlaufleiste ausschließlich mit CSS. Dieses Mal werde ich die Methoden vereinheitlichen und den Code direkt veröffentlichen.

            &::-webkit-scrollbar {
              //Bildlaufleisten-Hintergrundbreite: 16px;
              Hintergrund: #191a37;
              Höhe: 14px;
            }

            &::-webkit-scrollbar-track,
            &::-webkit-scrollbar-thumb {
              Rahmenradius: 999px;
              Breite: 20px;
              Rand: 5px durchgehend transparent;
            }

            &::-webkit-scrollbar-track {
              Box-Shadow: 1px 1px 5px #191a37 Einschub;
            }

            &::-webkit-scrollbar-thumb {
              //Ändern Sie den Stil des Bildlaufleisten-Schiebereglers. Breite: 20px;
              Mindesthöhe: 20px;
              Hintergrundclip: Inhaltsbox;
              Box-Shadow: 0 0 0 5px #464f70 Einschub;
            }

            &::-webkit-scrollbar-corner {
              Hintergrund: #191a37;
            }

Dies ist eine ziemlich vollständige Modifikation.

Das Folgende ist sehr prägnant. Einen Versuch wert

            &::-webkit-scrollbar {
              Breite: 6px;
              Höhe: 6px;
              Hintergrund: transparent;
            }

            &::-webkit-scrollbar-thumb {
              Hintergrund: transparent;
              Rahmenradius: 4px;
            }

            &:hover::-webkit-scrollbar-thumb {
              Hintergrund: hsla (0, 0 %, 53 %, 0,4);
            }

            &:hover::-webkit-scrollbar-track {
              Hintergrund: hsla (0, 0 %, 53 %, 0,1);
            }

Der Vorteil dabei ist, dass die geänderte Bildlaufleiste nur angezeigt wird, wenn die Maus bewegt wird, was eine gute Erfahrung ist

(Fordern Sie den Code an, die Bildlaufleiste einer bestimmten Achse auszublenden.)

Überlauf-x: versteckt;

Ich dachte, vorher war es keiner und es hat sich lange Zeit nicht geändert.

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.

<<:  Hilfe zum Webdesign: Datenreferenz für Web-Schriftgrößen

>>:  So stellen Sie die angezeigte Seite so ein, dass Baidu ihren Snapshot nicht speichern kann

Artikel empfehlen

Verstehen Sie alle Aspekte von HTTP-Headern mit Bildern und Text

Was sind HTTP-Header HTTP ist eine Abkürzung für ...

So zeigen Sie die MySQL-Zeitzone an und legen sie fest

1. Überprüfen Sie die Zeitzone der Datenbank Vari...

Tutorial zur Installation von MySQL 5.7.18 mit einem RPM-Paket

System: CentOS 7 RPM-Pakete: mysql-community-clie...

Tiefgreifendes Verständnis der Verwendung von CSS clear:both

clear:both wird zum清除浮動Das ist der Eindruck, den ...

JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts

JavaScript-Umschalteffekt für Bekleidungsalben (ä...

Analyse des Unterschieds zwischen relativem und absolutem HTML-Pfad

Gerade HTML-Anfänger stehen häufig vor dem Problem...

So aktualisieren Sie CentOS7 auf CentOS8 (detaillierte Schritte)

Dieser Artikel erläutert anhand eines konkreten B...

Detaillierte Erläuterung des Ausführungsprinzips des MySQL-Kill-Befehls

Inhaltsverzeichnis Prinzip der Kill-Befehlsausfüh...

Beispiele für einige Verwendungstipps für META-Tags in HTML

HTML-Meta-Tag HTML-Meta-Tags können verwendet wer...

Detaillierte Erklärung der Winkelinhaltsprojektion

Inhaltsverzeichnis Einzelne Inhaltsprojektion Mul...

Tutorial zur Installation und Deinstallation von Python3 unter Centos7

1. Installieren Sie Python 3 1. Installieren Sie ...

Lösung für den MySQL-Root-Passwortfehler Nummer 1045

MySQL-Dienst stoppen Klicken Sie in Windows mit d...