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.

Referenzen

• DO