Ä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
So verwenden Sie Zeit als Beurteilungsbedingung in MySQL
Hintergrund: Während des Entwicklungsprozesses mü...
Autotrash-Tool für Linux zum automatischen Löschen alter Junk-Dateien zu einem festgelegten Zeitpunkt
Autotrash ist ein Befehlszeilenprogramm, das den ...
Nachdem Idea das Webprojekt veröffentlicht hat, kann der Tomcat-Server das Projekt und seine Lösung nicht finden
Überblick Das Projekt wurde erfolgreich erstellt ...
Fallbeispiel zur TypeScript-Schnittstellendefinition
Die Rolle der Schnittstelle: Schnittstelle, auf E...
Detaillierte Erläuterung der 8 Attributwerte des Hintergrundattributs (Interviewfrage)
Der Wert der Hintergrundeigenschaft in CSS Hinter...
Mybatis implementiert Details zum Abfangen und Ändern von SQL-Abfragen
Vorwort Eine der Funktionen eines Interceptors be...
Lösen Sie schnell das Problem des langsamen Starts nach der Tomcat-Neukonfiguration
Während der Konfiguration des Jenkins+Tomcat-Serv...
Welche magischen Anwendungen haben CSS-Filter?
Hintergrund Grundlegende Konzepte CSS filter wend...
Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen
Der Container wurde bereits erstellt. So erfahren...
Detaillierte Erklärung zu React Hooks
Inhaltsverzeichnis Was sind Hooks? Klassenkompone...
Docker-Bindung mit fester IP/Hostübergreifender Container-Gegenzugriffsvorgang
Vorwort Bisher waren statische IPs, die über Pipe...
Installieren Sie Windows Server 2019 auf VMware Workstation (Grafisches Tutorial)
Wenn Sie aufgefordert werden, einen Schlüssel ein...
MySQL-Tutorial zum Bereitstellen mehrerer Instanzen auf einer einzigen Maschine mit mysqld_multi
Inhaltsverzeichnis 1. MySQL-Kompilierung und -Ins...
Dieser Artikel zeigt Ihnen, wie Sie CSS wie JS-Module importieren
Inhaltsverzeichnis Vorwort Was sind erstellbare S...