Der aktuelle Stand des Stylings von Scrollbars in CSS (Update 2022)

Ihre beste Wahl zum Stylen von Scrollbars in CSS, für eine möglichst breite Browserunterstützung, ist die Verwendung der speziellen ::webkit-präfixierten CSS-Eigenschaften für Scrollbars (Chrome & Safari benötigen diese vorerst) und die standardisierten Eigenschaften scrollbar-width und scrollbar-color (vorerst für Firefox).

Ein grundlegendes Setup würde also so aussehen

.styled-scrollbars {
  /* Foreground, Background */
  scrollbar-color: #999 #333;
}
.styled-scrollbars::-webkit-scrollbar {
  width: 10px; /* Mostly for vertical scrollbars */
  height: 10px; /* Mostly for horizontal scrollbars */
}
.styled-scrollbars::-webkit-scrollbar-thumb { /* Foreground */
  background: #999;
}
.styled-scrollbars::-webkit-scrollbar-track { /* Background */
  background: #333;
}

Verwendung von benutzerdefinierten Eigenschaften zum Stylen von Scrollbars in CSS

Sie könnten dies mit benutzerdefinierten Eigenschaften etwas DRYer gestalten, wie zum Beispiel:

.styled-scrollbars {
  --scrollbar-foreground: #999
  --scrollbar-background: #333
  /* Foreground, Background */
  scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}
.styled-scrollbars::-webkit-scrollbar {
  width: 10px; /* Mostly for vertical scrollbars */
  height: 10px; /* Mostly for horizontal scrollbars */
}
.styled-scrollbars::-webkit-scrollbar-thumb { /* Foreground */
  background: var(--scrollbar-foreground);
}
.styled-scrollbars::-webkit-scrollbar-track { /* Background */
  background: var(--scrollbar-background);
}

Ein Sass-Mixin & andere Preprocessing-Optionen

Wenn Sie Sass verwenden, könnten Sie die Verwendung so abstrahieren, was Anpassungsparameter ermöglicht

@mixin scrollbars(
  $size: 10px,
  $foreground-color: #999,
  $background-color: #333
) {
  // For Chrome & Safari
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }
  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  // Standard version (Firefox only for now)
  scrollbar-color: $foreground-color $background-color;
}

Sie denken vielleicht, dass Autoprefixer bei der Anbieterpräfixierung helfen kann, aber die Syntaxen sind so unterschiedlich, dass es nicht so aussieht, als ob sie sich besonders dafür interessieren und ich kann es ihnen nicht verdenken.

Wenn Sie sich mit PostCSS beschäftigen, gibt es jedoch ein postcss-scrollbar Plugin. Die Idee ist, dass Sie die standardisierte Syntax schreiben und es die Versionen mit Anbieterpräfixen erstellt, um sie abzugleichen. Das bedeutet, dass Sie in Ihren Styling-Optionen auf das beschränkt sind, was die Spezifikation bietet, aber das ist langfristig wahrscheinlich sowieso eine kluge Entscheidung.

/* input */
.scrollable {
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

/* output */
.scrollable::-webkit-scrollbar-thumb {
  background-color: rebeccapurple;
}
.scrollable::-webkit-scrollbar-track {
  background-color: green;
}
.scrollable::-webkit-scrollbar-corner {
  background-color: green;
}
.scrollable::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
.scrollable {
  -ms-overflow-style: auto;
  scrollbar-color: rebeccapurple green;
  scrollbar-width: thin;
}

Exotischere Chrome & Safari Scrollbar-Styles

Die nicht standardisierten ::-webkit- Eigenschaften zum Stylen von Scrollbars in CSS bieten deutlich mehr Stylingmöglichkeiten als die standardisierten Eigenschaften. Zum Beispiel könnte ich die Breite einer vertikalen Scrollbar extrem breit machen, die Hintergrundspur mit Schatten versehen und den Vordergrund-Schieberegler mit einem Gradienten.

Hier sind eine Reihe weiterer schicker Styles, die den vendor-prefixed Ansatz verwenden

Es gibt viele davon auf CodePen zum Durchsuchen.

Ein JavaScript-Ansatz für gestylte Scrollbars

Wenn gestylte Scrollbars notwendig sind und Sie eine sehr detaillierte Designkontrolle über alle Browser hinweg benötigen, müssen Sie wahrscheinlich auf eine JavaScript-Lösung zurückgreifen. Davon muss es Dutzende von Bibliotheken geben. Mir ist simplebar über den Weg gelaufen und es scheint eine ziemlich moderne zu sein mit einfacher Instanziierung. Hier ist eine Demo davon

Hier ist eine weitere namens simple-scrollbar

Das Surma hat ein sehr schickes Tutorial geschrieben, das eine benutzerdefinierte Scrollbar erstellt, die beim Scrollen keine JavaScript benötigt (gut für die Performance), aber etwas JavaScript-Setup-Code erfordert.

Benutzerdefinierte Scrollbars sind extrem selten, und das liegt hauptsächlich daran, dass Scrollbars eines der wenigen Elemente im Web sind, die so gut wie nicht gestaltbar sind (ich schaue dich an, Date Picker). Sie können JavaScript verwenden, um Ihre eigenen zu erstellen, aber das ist teuer, geringe Wiedergabetreue und kann sich träge anfühlen. In diesem Artikel werden wir einige unkonventionelle CSS-Matrizen verwenden, um einen benutzerdefinierten Scroller zu erstellen, der während des Scrollens kein JavaScript benötigt, nur etwas Setup-Code.

Ich werde eine Kopie hier einbetten

Eine Cross-Browser-Demo von benutzerdefinierten Scrollbars

Es ist ziemlich konsistent über Chrome, Safari und Firefox

Hier ist ein Screenshot davon, falls Sie ihn auf dem Handy oder so betrachten und diese nicht sehen können

Hinweis zu Firefox auf macOS

Die Eigenschaft scrollbar-width funktioniert immer, aber die Eigenschaft scrollbar-color funktioniert nur, wenn Sie unter "Allgemeine Systemeinstellungen" die Option "Scrollleisten anzeigen: Immer" aktiviert haben.