Ä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

Pycharm2017 realisiert die Verbindung zwischen Python3.6 und MySQL

In diesem Artikel erfahren Sie, wie Sie Python3.6...

Neue Funktionen von JS ES: Einführung in Erweiterungsoperatoren

1. Spread-Operator Der Spread-Operator besteht au...

Perfekte Lösung für keine rc.local-Datei in Linux

Neuere Linux-Distributionen verfügen nicht mehr ü...

js realisiert die Bildschneidefunktion

In diesem Artikelbeispiel wird der spezifische Co...

So zeigen Sie MySql-Indizes an und optimieren sie

MySQL unterstützt Hash- und B-Tree-Indizes. InnoD...

CSS erzielt farbenfrohe und intelligente Schatteneffekte

Hintergrund Haben Sie sich jemals gefragt, wie Si...

So konfigurieren Sie Java-Umgebungsvariablen im Linux-System

Konfigurieren von Java-Umgebungsvariablen Hier we...

Erweiterte Verwendungsbeispiele für den Befehl mv in Linux

Vorwort Der Befehl mv ist die Abkürzung für move ...

MySQL-Operationen: Operationen mit JSON-Datentyp

Im vorherigen Artikel haben wir das ausführliche ...

Zusammenfassung der gebräuchlichen Buchstaben in Unicode

Die meisten der ersten Computer konnten nur ASCII...

Einige Hinweise zur MySQL-Self-Join-Deduplizierung

Lassen Sie mich kurz das Funktionsszenario erklär...