Implementierung der CSS-Bildlaufleisten-Stileinstellungen

WebKit-Bildlaufleistenstil zurücksetzen

1. Die Bildlaufleiste enthält Bildlaufleistenschaltflächen und eine Spur. Tracks werden weiter in Trackstücke und Thumbs unterteilt. Bei den Spurstücken handelt es sich um den oberen und unteren Teil des Daumens.
2. Die Scrollbar-Ecke ist der Schnittpunkt von horizontalen und vertikalen Winkeln
3. Mit resize wird das kleine Steuerelement zum Ziehen und Ändern der Größe von Elementen am Schnittpunkt der Bildlaufleisten festgelegt

Das Kompositionsstrukturdiagramm sieht wie folgt aus:

Sobald der benutzerdefinierte Stil der Bildlaufleiste gefunden wurde, werden die Standardstileinstellungen des Browsers ungültig und es wird nur der in CSS definierte Stil verwendet. Dies bedeutet, dass der Wert nicht nur für die Bildlaufleistenschaltfläche oder die Bildlaufleistenspur festgelegt werden kann.

-webkit-scrollbar /*Die komplette Bildlaufleiste, muss beim Zurücksetzen gesetzt werden*/
-webkit-scrollbar-button /* Schaltflächen an beiden Enden der Bildlaufleiste*/
-webkit-scrollbar-track /* Scrollbar-Spur (einschließlich Daumen und Spurstück) */
-webkit-scrollbar-track-piece /* Die oberen und unteren (linken und rechten) Teile der mittleren und unteren Stücke der Spur*/
-webkit-scrollbar-thumb /*Das kleine Quadrat innerhalb der Bildlaufleiste*/
-webkit-scrollbar-corner /* Vertikaler und horizontaler Schnittwinkel */
-webkit-resize // Ein kleines Steuerelement am Schnittpunkt der Bildlaufleisten zum Ziehen und Ändern der Größe von Elementen*/

Sie können es in Kombination mit den folgenden Pseudoklassen festlegen (Bildlaufleisten können bei verschiedenen Betriebssystembrowsern unterschiedlich sein, daher können Sie sie gemäß den folgenden Pseudoklassen festlegen):

• :horizontal horizontale Spur, Spur-Stück, Daumen
• :vertica vertikale Spur, Spur-Bild, Daumen
• : Dekrement-Taste für Auf- und Links-Tasten, Schienenstück für Auf- oder Links
• : Inkrement-Taste für Abwärts- und Rechts-Tasten, Schienenstück für Abwärts- und Rechts
• :start Gilt für Buttons und Spurstücke, unabhängig davon, ob das Objekt (Button oder Spurstück) vor dem Slider platziert wird
• :end Gilt für Buttons und Spurstücke, unabhängig davon, ob das Objekt (Button oder Spurstück) hinter dem Schieberegler platziert wird
• :double-button gilt für Knöpfe und Gleisstücke. Ob das Ende des Gleises ein Knopfpaar ist
• :single-button gilt für Buttons und Trackstücke. Ob das Ende des Tracks ein Button ist
• :no-button gilt für Gleisstücke. Am Ende des Gleises gibt es keinen Button.
• :corner-present gilt für alle Scrollbars, unabhängig davon, ob die Ecke der Scrollbar vorhanden ist
• :window-inactive gilt für alle Scrollbars, einschließlich des Scrollbar-Bereichs, wenn der Fokus nicht auf dem Fenster liegt
• :enabled, :disabled, :hover, :active Pseudoklassen gelten ebenfalls

Im Internet Explorer können Sie nur die Farbe der Bildlaufleiste ändern.

scrollbar-arrow-color:#f2f2f3; /*Pfeile nach oben und unten*/
scrollbar-track-color /*untere Hintergrundfarbe*/
scrollbar-face-color /*Vordergrundfarbe der Bildlaufleiste, entspricht dem Daumen*/
scrollbar-shadow-color /*Farbe der Bildlaufleistenränder, Thumbm-Rahmen*/
scrollbar-highlight-color /*Gesamtfarbe der Bildlaufleiste*/
scrollbar-base-color /* Grundfarbe der Bildlaufleiste*/

Verweise

Bildlaufleisten gestalten | Webkit

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.