Detaillierte Erklärung zum Anpassen des Stils von CSS-Bildlaufleisten
|
Dieser Artikel stellt den CSS-Bildlaufleistenselektor vor und zeigt in einer Demo, wie eine horizontale und eine vertikale Bildlaufleiste in Webkit-Browsern und IE-Browsern angepasst werden kann. 0. Nachfrage Manchmal möchten wir den Standard-Bildlaufleistenstil des Browsers nicht verwenden, da er nicht angepasst und schön genug ist. Wie passen Sie also den Stil der Bildlaufleiste an? Lassen Sie uns unten gemeinsam einen Blick darauf werfen. 1 Grundlagen 1.1 CSS-Bildlaufleisten-Selektor für den Webkit-Kern Der CSS-Pseudoklassenselektor ::-webkit-scrollbar beeinflusst den Stil der Bildlaufleiste eines Elements. Eigentum: ::-webkit-scrollbar — Die gesamte Bildlaufleiste ::-webkit-scrollbar-track — Bildlaufleistenspur ::-webkit-scrollbar-thumb — Der Daumen auf der Bildlaufleiste ::-webkit-scrollbar-button — Schaltflächen auf der Bildlaufleiste (Pfeile nach oben und unten) ::-webkit-scrollbar-track-piece — Der Track-Teil der Bildlaufleiste ohne den Schieberegler ::-webkit-scrollbar-corner — Die Ecke, wo die vertikalen und horizontalen Bildlaufleisten gleichzeitig zusammentreffen ::-webkit-resizer – Teilstile für die Ecken einiger Elemente (z. B. verschiebbare Schaltflächen im Textbereich) Beachten: (1) Browserunterstützung: ::-webkit-scrollbar ist nur in Browsern verfügbar, die Webkit unterstützen (Chrome, Safari). (2) Vertikale/horizontale Bildlaufleisten können eingestellt werden Sie können die Bildlaufleiste horizontal (:horizontal) einstellen. Wenn nicht angegeben, ist die Standardeinstellung vertikal (:vertical). (3) Schaltflächen auf der Bildlaufleiste (:dekrementieren, :inkrementieren) Sie können das Bild einstellen, das in der Demo unten angezeigt wird. 1.2 Benutzerdefinierter Bildlaufleistenstil im IE Es gibt relativ wenige anpassbare Stile und Sie können nur die in jedem Teil der Bildlaufleiste angezeigten Farben steuern, sodass die Anpassungsmöglichkeiten gering sind. Hier liste ich nur einige Stile auf. Ich habe Stile wie scrollbar-3dlight-color und scrollbar-highlight-color ausprobiert, aber sie haben nicht funktioniert, also werde ich sie hier nicht auflisten: scrollbar-arrow-color — Die Farbe des Bildlaufleistendreieckpfeils scrollbar-face-color — Die Farbe des Bildlaufleistenschiebers scrollbar-track-color — Die Farbe der Bildlaufleistenspur und des Schaltflächenhintergrunds scrollbar-shadow-color — Die Farbe des Schiebereglerrahmens der Bildlaufbox 2. Schneller Einstieg mit Demo 2.1 Benutzerdefinierte Bildlaufleistenstile für Webkit-basierte Browser (Chrome, Safari) Wenn Sie die obige Beschreibung etwas abstrakt finden, können Sie die Demo direkt im Browser öffnen und die Bedeutung der einzelnen Attributs anhand der Kommentare in der Demo verstehen. Ich habe einige der Eigenschaften in der Abbildung markiert. Die äußeren Spureigenschaften der Bildlaufleiste sind in der Abbildung nicht markiert. Sie können die Chrome-Browserkonsole öffnen, um die Eigenschaften anzuzeigen:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Scrollbar-Demo – lynnshen</title>
<style type="text/css">
* {
Rand: 0;
Polsterung: 0;
}
.scolltable {
Breite: 500px;
Höhe: 300px;
Rand: 1px tief schwarz;
/*Horizontale und vertikale Zentrierung erreichen*/
Position: absolut;
links: 50%;
oben: 50 %;
Rand links: -250px;
Rand oben: -150px;
Überlauf: scrollen;
}
.Inhalt {
/*Es sollte breiter sein als .scolltable*/
Breite: 600px;
}
/*ganze Bildlaufleiste*/
::-webkit-scrollbar {
Breite: 24px;
Hintergrundfarbe: transparent;
}
/* Gesamte horizontale Bildlaufleiste */
::-webkit-scrollbar:horizontal {
Höhe: 24px;
Hintergrundfarbe: transparent;
}
/*Scrollbar-Spur*/
::-webkit-scrollbar-track {
Hintergrundfarbe: #f6f8fc;
Rahmen rechts: 1px durchgezogen #f1f5fa;
Rand: 1px durchgezogen #f1f5fa;
;
}
/*Vertikaler Schieberegler*/
::-webkit-scrollbar-thumb {
Hintergrundfarbe: rgba(220, 228, 243, 1);
Rahmenradius: 0px;
Rahmen oben: 1px durchgezogen #edf2f9;
Rahmen unten: 1px durchgezogen #edf2f9;
Rahmen links: 1px durchgezogen #f1f5fa;
}
/*Horizontaler Schieberegler*/
::-webkit-scrollbar-thumb:horizontal {
/* Hintergrundfarbe: rgba(220, 228, 243, 1); */
Rahmenradius: 0px;
Rahmen oben: 1px durchgezogen #edf2f9;
/* Rahmen rechts: 1px durchgezogen #f1f5fa;
Rahmen links: 1px durchgezogen #f1f5fa; */
}
/*Schaltfläche auf der Bildlaufleiste - vertikale Bildlaufleiste nach oben*/
::-webkit-scrollbar-button:dekrementieren {
Rahmen unten: 1px durchgezogen #edf2f9;
Höhe: 26px;
Hintergrund: URL("./images/scroll_up.png") 7px 9px keine Wiederholung;
Rahmen rechts: 1px durchgezogen #f1f5fa;
Rahmen links: 1px durchgezogen #f1f5fa;
}
/*Schaltfläche auf der Bildlaufleiste - vertikale Bildlaufleiste nach unten*/
::-webkit-scrollbar-button:inkrementieren {
Rahmen oben: 1px durchgezogen #edf2f9;
Höhe: 26px;
Hintergrund: URL("./images/scroll_down.png") 7px 10px keine Wiederholung;
Rahmen rechts: 1px durchgezogen #f1f5fa;
Rahmen links: 1px durchgezogen #f1f5fa;
Rahmen unten: 1px durchgezogen #f1f5fa;
}
/*Button auf der Bildlaufleiste - horizontale Bildlaufleiste nach links*/
::-webkit-scrollbar-button:horizontal:dekrementieren {
Rahmen oben: 1px durchgezogen #edf2f9;
Breite: 26px;
Hintergrund: URL("./images/scroll_left.png") 9px 7px keine Wiederholung;
Rahmen oben: 1px durchgezogen #f1f5fa;
Rahmen unten: 1px durchgezogen #f1f5fa;
Rahmen rechts: 1px durchgezogen #f1f5fa;
}
/*Button auf der Bildlaufleiste - horizontale Bildlaufleiste nach rechts*/
::-webkit-scrollbar-button:horizontal:inkrementieren {
Rahmen oben: 1px durchgezogen #edf2f9;
Breite: 25px;
Hintergrund: URL("./images/scroll_right.png") 10px 7px keine Wiederholung;
Rahmen links: 1px durchgezogen #f1f5fa;
}
/*Ecke*/
::-webkit-scrollbar-corner{
Rand: 1px durchgezogen #dce4f3;
}
</Stil>
</Kopf>
<Text>
<div Klasse="scolltable">
<div Klasse="Inhalt">
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
</div>
</body>
</html>Ergebnis:
WebKit-basierte Browser veranschaulichen: (1) Die von den Schaltflächen an beiden Enden der Bildlaufleiste verwendeten Bilder und vier Bilder, die in jeder der vier Ecken verwendet werden; (2).scolltable erreicht den Effekt der horizontalen und vertikalen Zentrierung, indem es eine absolute Ausrichtung verwendet, um den Fixpunkt des Elements in der Mitte des Körpers zu positionieren. Verwenden Sie dann einen negativen Rand (die halbe Breite und Höhe des Elements), um es wieder in die Mitte des Körpers zu ziehen. 2.2 Benutzerdefinierter Bildlaufleistenstil im IE
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Bildlaufleiste für IE--lynnshen</title>
<style type="text/css">
* {
Rand: 0;
Polsterung: 0;
}
.scolltable {
Breite: 500px;
Höhe: 300px;
Rand: 1px tief schwarz;
/*Horizontale und vertikale Zentrierung erreichen*/
Position: absolut;
links: 50%;
oben: 50 %;
Rand links: -250px;
Rand oben: -150px;
Überlauf: scrollen;
Bildlaufleisten-Oberflächenfarbe: grüngelb;
Bildlaufleistenpfeil-Farbe: Goldrute;
Bildlaufleisten-Schattenfarbe: rot;
Bildlaufleisten-Spurfarbe: Pink;
}
.Inhalt {
/*Es sollte breiter sein als .scolltable*/
Breite: 600px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="scolltable">
<div Klasse="Inhalt">
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::3s::::::333:33333333333333333333ag33333333333333333333333333333 es333333333333333333333333333333 es33 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann dann dann dann aber33333333333333333333 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 nicht3 dann3 dann3 aber3 dann3 nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht nicht dann nichtie dasen aber aber abersossoss aberstens aberstensss aberten aber abers :::::::::::
</div>
</body>
</html>Ergebnis:
IE 3. Zusammenfassung Dieser Artikel soll hauptsächlich darauf eingehen, wie der Bildlaufleistenstil in Webkit-basierten Browsern und im Internet Explorer angepasst werden kann, und bietet hierzu zwei Demos. Wenn Sie Fragen haben, können Sie diese gerne stellen. 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. |
<<: W3C Tutorial (14): W3C RDF und OWL Aktivitäten
Artikel empfehlen
Freigabe der schnellen Wiederherstellungslösung für große MySQL-SQL-Dateien
Vorwort Bei der Verwendung einer MySQL-Datenbank ...
Unterschiede zwischen diesem Schlüsselwort in NodeJS und Browsern
Vorwort Jeder, der JavaScript gelernt hat, muss s...
MySQL-Anmelde- und Beendigungsbefehlsformat
Das Befehlsformat für die MySQL-Anmeldung ist: my...
Interaktion im Webdesign: Eine kurze Diskussion über Paging-Probleme
Funktion: Zur vorherigen Seite oder zur nächsten ...
Verständnis und Anwendungsszenarien von Enumerationstypen in TypeScript
Inhaltsverzeichnis 1. Was ist 2. Verwendung Numer...
So installieren und konfigurieren Sie den SSH-Dienst in Ubuntu 18.04
Installieren Sie das SSH-Tool 1. Öffnen Sie das T...
Navicat-Verbindung MySQL Fehlerbeschreibungsanalyse
Inhaltsverzeichnis Umfeld Version der virtuellen ...
Tipps zum reflektierenden Lernen von JavaScript
Inhaltsverzeichnis 1. Einleitung 2. Schnittstelle...
Erfahren Sie mehr über die am häufigsten verwendeten JavaScript-Ereignisse
Inhaltsverzeichnis JavaScript-Ereignisse: Häufig ...
Responsive Layout-Zusammenfassung (empfohlen)
Grundkenntnisse der responsiven Layoutentwicklung...
So verwenden Sie HTML+CSS zum Erstellen einer TG-Vision-Homepage
Dieses Mal verwenden wir HTML+CSS-Layout, um eine...
Detaillierte Schritte zum Einrichten des Hosts Nginx + Docker WordPress Mysql
Umfeld Linux 3.10.0-693.el7.x86_64 Docker-Version...
Detaillierte Erläuterung der Verwendung der integrierten Funktion „locate instr position find_in_set“ in der effizienten Fuzzy-Suche von MySQL
Es gibt die folgenden vier häufig verwendeten Met...
Schritte zur VSCode-Konfiguration mit der Git-Methode
Git ist in vscode integriert und viele Vorgänge k...
Einfache Implementierung zum Ausblenden der Bildlaufleiste in HTML
1. HTML-Tags mit Attributen XML/HTML-CodeInhalt i...