Tutorial

Gestalten von Bildlaufleisten mit CSS

Published on February 19, 2021
authorauthor

William Le and Bradley Kouchi

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products


About the authors
Default avatar
William Le

author



Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel