Ads by ProfitSence
Close

Benutzerdefinierte Bildlaufleisten mit CSS für alle modernen Browser

Last Updated on Sonntag 9. Okt. 2022

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