W3docs
de
Anmelden

CSS scrollbar-Eigenschaft

Verwende die CSS-scrollbar-Eigenschaft, um benutzerdefinierte Themes für Scrollleisten zu erstellen. Eigenschaftswerte und Beispiele.

Die ::-webkit-scrollbar-CSS-Pseudo-Elemente sind ein proprietärer Style-Hook, der Designern ermöglicht, benutzerdefinierte Themes für die nativen Scrollleisten des Browsers zu erstellen.

Info

Diese Pseudo-Elemente sind hinter dem -webkit-Vendor-Präfix verfügbar und werden hauptsächlich in Chromium-basierten Browsern unterstützt. Sie werden in Firefox oder Safari nicht unterstützt. Für eine breitere Browserunterstützung solltest du die Standardeigenschaften scrollbar-width und scrollbar-color verwenden.

Die ::-webkit-scrollbar-Pseudo-Elemente bestehen aus sieben verschiedenen Teilen, die zusammen ein vollständiges Scrollleisten-UI-Element bilden. Diese sieben Pseudo-Elemente sind die folgenden:

  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-track-piece
  • ::-webkit-scrollbar-thumb
  • ::-webkit-scrollbar-corner
  • ::-webkit-scrollbar-resizer

Eine Scrollleiste erscheint nur, wenn der Inhalt eines Elements größer als sein Box-Modell ist. Das Styling geht daher Hand in Hand mit der overflow-Eigenschaftsfamilie — overflow-x und overflow-y ermöglichen es, horizontales und vertikales Scrollen unabhängig voneinander zu steuern.

Syntax

Um Scrollleisten zu gestalten, wendest du CSS-Regeln direkt auf die ::-webkit-scrollbar-Pseudo-Elemente des scrollbaren Containers an. Du kannst jedes Element mit overflow auf scroll oder auto ansprechen, nicht nur body.

.scrolling-element::-webkit-scrollbar {
  /* scrollbar styles */
}
.scrolling-element::-webkit-scrollbar-thumb {
  /* thumb styles */
}

Beispiel der scrollbar-Pseudo-Elemente:

CSS scrollbar-Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #eee;
        overflow: scroll;
        width: 85%;
        max-width: 600px;
        margin: 0 auto;
        padding: 3em;
        font: 100%/1.4 Georgia, serif;
        border: 1px solid #666;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar {
        width: 1em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      }
      body::-webkit-scrollbar-thumb {
        background-color: #666;
        outline: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Probier es selbst »

Beispiel der scrollbar-Pseudo-Elemente mit ::-webkit-scrollbar-track und ::-webkit-scrollbar-thumb:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }
      body {
        height: 100%;
        background: #ececec;
        overflow: scroll;
        width: 90%;
        max-width: 550px;
        margin: 0 auto;
        padding: 2em;
        border: 2px solid #cccccc;
      }
      p {
        margin: 0 0 1.5em;
      }
      body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
      }
      body::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <h2>Scrollbar property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>
Probier es selbst »

Browserübergreifende Standard-Scrollleisten

Da die ::-webkit-scrollbar-Pseudo-Elemente nur in Chromium-basierten Browsern funktionieren, hat die CSS Working Group zwei Standardeigenschaften eingeführt, die Firefox heute unterstützt und die Webkit/Blink-Engines inzwischen ebenfalls erkennen: scrollbar-width und scrollbar-color.

  • scrollbar-width — legt die Dicke fest. Akzeptiert die Schlüsselwörter auto (Standard), thin oder none (blendet die Scrollleiste aus, während das Element weiterhin scrollbar bleibt).
  • scrollbar-color — nimmt zwei Farben entgegen: zuerst die Farbe des Thumbs, dann die Farbe der Track.
.scrolling-element {
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5; /* thumb track */
}

Ein robuster Ansatz besteht darin, zuerst die Standardeigenschaften als Basis zu deklarieren und dann die ::-webkit-scrollbar-Regeln obendrauf zu schichten, um in Chromium-Browsern eine feinere Kontrolle zu ermöglichen:

.scrolling-element {
  /* Standard — Firefox and modern Chromium/Safari */
  scrollbar-width: thin;
  scrollbar-color: #666 #f5f5f5;
}

/* Detailed styling — Chromium-based browsers only */
.scrolling-element::-webkit-scrollbar {
  width: 10px;
}
.scrolling-element::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.scrolling-element::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
}
Info

Verwende scrollbar-width: thin und scrollbar-color, wenn du die Scrollleiste in allen modernen Browsern nur neu einfärben oder schmaler machen möchtest. Greife auf die ::-webkit-scrollbar-Pseudo-Elemente zurück, wenn du einzelne Teile (Buttons, Track-Stück, Ecke) gestalten möchtest, die die Standardeigenschaften nicht erreichen können. Das Abrunden des Thumbs mit border-radius ist nur mit -webkit- möglich.

Pseudo-Elemente

Pseudo-ElementBeschreibung
::-webkit-scrollbarDie Scrollleiste selbst.
::-webkit-scrollbar-buttonDie Schaltflächen auf der Scrollleiste.
::-webkit-scrollbar-trackDie Spur der Scrollleiste.
::-webkit-scrollbar-track-pieceDer Teil der Spur, der nicht vom Handle abgedeckt wird.
::-webkit-scrollbar-thumbDer ziehbare Scroll-Handle.
::-webkit-scrollbar-cornerDie untere Ecke der Scrollleiste, wo horizontale und vertikale Scrollleiste zusammentreffen.
::-webkit-scrollbar-resizerDer ziehbare Größenänderungs-Handle, der in der unteren Ecke einiger Elemente erscheint.

Übungen

Übung
Welche CSS-Eigenschaften werden verwendet, um das Erscheinungsbild von Scrollleisten zu ändern?
Welche CSS-Eigenschaften werden verwendet, um das Erscheinungsbild von Scrollleisten zu ändern?
Was this page helpful?