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-resizerBeispiel
<!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
|
|
|
|
|---|---|---|---|
| 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?
Richtig!
Falsch!