Gestalten von Bildlaufleisten mit CSS

Einführung

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.

In diesem Tutorial lernen Sie, wie Sie CSS verwenden, um Bildlaufleisten zur Unterstützung moderner Browser anzupassen.

Voraussetzungen

Um dieser Anleitung folgen zu können, benötigen Sie:

• Vertrautheit mit den Konzepten von Herstellerpräfix, Pseudoelementen und Graceful degredation (in etwa „würdevolle Herabstufung“).

Gestalten von Bildlaufleisten in Chrome, Edge und Safari

Derzeit ist die Gestaltung von Bildlaufleisten in Chrome, Edge und Safari mit dem Herstellerpräfix Pseudoelement -webkit scrollbar möglich.

Hier ist ein Beispiel, das die Pseudoelemente ::-webkit-scrollbar, ::-webkit-scrollbar-track und ::webkit-scrollbar-thumb verwendet:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

Hier ist ein Screenshot der Bildlaufleiste, die mit diesen CSS-Regeln erstellt wird:

Dieser Code funktioniert in den neuesten Versionen von Chrome, Edge und Safari.

Leider wurde diese Spezifikation vom W3C formell aufgegeben und wird wahrscheinlich im Laufe der Zeit nicht mehr verwendet werden.

Gestalten von Bildlaufleisten in Firefox

Derzeit ist die Gestaltung von Bildlaufleisten für Firefox mit dem neuen CSS Scrollbars möglich.

Hier ist ein Beispiel, das die Eigenschaften scrollbar-width und scrollbar-color verwendet:

body {
  scrollbar-width: thin;          /* "auto" or "thin" */
  scrollbar-color: blue orange;   /* scroll thumb and track */
}

Hier ist ein Screenshot der Bildlaufleiste, die mit diesen CSS-Regeln erstellt wird:

Diese Spezifikation hat einige Gemeinsamkeiten mit der Spezifikation -webkit-scrollbar zur Steuerung der Farbe der Bildlaufleiste. Allerdings gibt es derzeit keine Unterstützung zur Änderung der Auffüllung und der Rundung des „Spurbalkens“.

Erstellen von zukunftssicheren Bildlaufleisten-Stilen

Sie können Ihr CSS in einer Weise schreiben, um sowohl die Spezifikationen -webkit-scrollbar als auch CSS Scrollbars zu unterstützen.

Hier ist ein Beispiel, das scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb verwendet:

/* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

Blink- und WebKit-Browser ignorieren Regeln, die sie nicht erkennen und wenden -webkit-scrollbar-Regeln an. Firefox-Browser ignorieren Regeln, die sie nicht erkennen und wenden CSS Scrollbars-Regeln an. Sobald Blink- und WebKit-Browser die Spezifikationen -webkit-scrollbar vollständig aufgeben, werden sie auf die neue Spezifikation CSS Scrollbars zurückgreifen.

Zusammenfassung

In diesem Artikel haben Sie einen Überblick über die Verwendung von CSS zur Gestaltung von Bildlaufleisten erhalten und wie Sie sicherstellen, dass diese Stile in den meisten modernen Browsern erkannt werden.

Es ist auch möglich, eine Bildlaufleiste zu simulieren, indem die Standard-Bildlaufleiste ausgeblendet und JavaScript verwendet wird, um Höhe und Bildlaufposition zu erkennen. Diese Ansätze stoßen jedoch an ihre Grenzen, wenn es darum geht, Erfahrungen wie Trägheits-Scrolling (z. B. die abklingende Bewegung beim Scrollen über Trackpads) zu reproduzieren.

Wenn Sie mehr über CSS erfahren möchten, lesen Sie unsere Themenseite zu CSS für Übungen und Programmierprojekte.