// Tutorial //

Gestalten von Bildlaufleisten mit CSS

Published on February 19, 2021
Default avatar
By William Le
Developer and author at DigitalOcean.
Deutsch
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:

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:

Screenshot einer Beispiel-Webseite mit einer benutzerdefinierten Bildlaufleiste mit einer blauen Bildlaufleiste auf einem orangefarbenen Balken.

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:

Screenshot einer Beispiel-Webseite mit einer benutzerdefinierten Bildlaufleiste mit einer blauen Bildlaufleiste auf einem orangefarbenen Balken.

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.


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!