CSS ScrollBar
- Custom Scrollbar CSS
- Im September 2018 definierte W3C CSS Scrollbars Spezifikationen für die Anpassung des Erscheinungsbildes von Bildlaufleisten mit CSS.
- Ab 2020 arbeiten 96 % der Internetbenutzer mit Browsern, die das CSS Scrollbar-Styling unterstützen.
- Sie müssen jedoch zwei Sätze von CSS-Regeln schreiben, um Blink- und WebKit- sowie auch Firefox-Browser abzudecken.
Webkit ScrollBar
- CSS Scrollbars werden von Firefox und ::-webkit-scrollbar von Chromium basiert (Chrome, Edge) und Safari unterstützt.
- Alle modernen Browser werden schließlich auf die CSS Scrollbars-Spezifikation umgestellt.
- Derzeit ist das Styling von Bildlaufleisten für Chrome, Edge und Safari mit dem Herstellerpräfix Pseudo-Element -webkit-scrollbar verfügbar.
Die CSS-Eigenschaft scrollbar-color legt die Farbe der Bildlaufleistenspur und des Daumens fest.
Custom Css CodePen
css scrollbar style
style scrollbar
/* Firefox */ * { scrollbar-width: thick; /* none | auto */ scrollbar-color: #ffa07a transparent; } /* Die erste gilt für den Daumen der Bildlaufleiste, die zweite für die Spur. */ /* Firefox */ /* Chrome, Edge, Safari */ *::-webkit-scrollbar { width: 14px; /* vertical scrollbar */ height: 14px; /* horizontal scrollbar */ } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: #ffa07a; border-radius: 14px; border: calc(14px / 4) solid #ccc; } *::-webkit-scrollbar-thumb:hover { background: #ff7f50; } /* Chrome, Edge, Safari */
Derzeit ist das Styling von Bildlaufleisten für Chrome, Edge und Safari mit dem Herstellerpräfix Pseudoelement -webkit-scrollbar verfügbar.