CSS-Eigenschaft scrollbar

Die Eigenschaft scrollbar ist ein Satz von CSS-Eigenschaften, ist ein proprietärer Style-Hook aus mit dem Designer benutzerdefinierte Designs für die nativen Scrollbalken des Browsers erstellen können.

Nun wird es hinter dem Herstellerpräfix -webkit angezeigt.

Der Eigenschaftssatz -webkit-scrollbar besteht aus sieben verschiedenen Pseudoelementen, die zusammen ein vollständiges Scrollbar-Oberflächenelement 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-resizer
Anfangswert auto
Gilt für Scrollboxen
Geerbt Ja
Animierbar Diskret
Version -
DOM Syntax -

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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 lora, 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>Beispiel für die Eigenschaft scrollbar</h2>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. </div>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. </div>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. </div>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. </div>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete.</div>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. </div>
    <div>Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt. </div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
::-webkit-scrollbar-button Die Schaltflächen in der Scrollbar.
::-webkit-scrollbar-track Der verschiebbare Scroll-Handle.
::-webkit-scrollbar-track-piece Die Spur der Scrollbar.
::-webkit-scrollbar-thumb Der Teil der Strecke, der nicht durch den Griff abgedeckt ist.
::-webkit-scrollbar-corner Die untere Ecke der Bildlaufleiste, wo sich sowohl horizontale als auch vertikale Bildlaufleisten treffen.
::-webkit-resizer Der ziehbare Größenänderungs-Handle, der in der unteren Ecke einiger Elemente erscheint.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome firefox safari opera
4.0 -webkit- (Partial) 64.0 (Partial) 5.1 -webkit- (Partial) 15.0 -webkit- (Partial)

Übe dein Wissen

Welche CSS Eigenschaften kann man verwenden, um den Scrollbar zu gestalten?
Finden Sie das nützlich?