CSS scrollbar-Eigenschaft
Die ::-webkit-scrollbar-Gruppe von CSS-Pseudoelementen ist ein proprietärer Stil-Hook, der Designern ermöglicht, benutzerdefinierte Themen für die nativen Scrollbars des Browsers zu erstellen.
INFO
Diese Pseudoelemente werden über das -webkit-Vendor-Präfix freigegeben 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 sollten Sie die Standard-Eigenschaften scrollbar-width und scrollbar-color verwenden.
Die ::-webkit-scrollbar-Pseudoelemente bestehen aus sieben verschiedenen Teilen, die zusammen ein vollständiges UI-Element der Scrollbar bilden. Diese sieben Pseudoelemente sind folgende:
::-webkit-scrollbar::-webkit-scrollbar-button::-webkit-scrollbar-track::-webkit-scrollbar-track-piece::-webkit-scrollbar-thumb::-webkit-scrollbar-corner::-webkit-scrollbar-resizer
Syntax
Um Scrollbars zu stylen, wenden Sie CSS-Regeln direkt auf die ::-webkit-scrollbar-Pseudoelemente des Scrollcontainers an. Sie können jedes Element mit overflow auf scroll oder auto einstellen ansprechen, nicht nur den body.
css
.scrolling-element::-webkit-scrollbar {
/* scrollbar styles */
}
.scrolling-element::-webkit-scrollbar-thumb {
/* thumb styles */
}Beispiel für die scrollbar-Pseudoelemente:
CSS-Scrollbar-Codebeispiel
html
<!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>Beispiel für die scrollbar-Pseudoelemente mit ::-webkit-scrollbar-track und ::-webkit-scrollbar-thumb:
html
<!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>Pseudoelemente
| Pseudoelement | Beschreibung |
|---|---|
::-webkit-scrollbar | Die Scrollbar selbst. |
::-webkit-scrollbar-button | Die Schaltflächen auf der Scrollbar. |
::-webkit-scrollbar-track | Das Laufband der Scrollbar. |
::-webkit-scrollbar-track-piece | Der Teil des Laufbands, der nicht vom Griff abgedeckt wird. |
::-webkit-scrollbar-thumb | Der ziehbare Scrollgriff. |
::-webkit-scrollbar-corner | Die untere Ecke der Scrollbar, wo sich horizontale und vertikale Scrollbars treffen. |
::-webkit-scrollbar-resizer | Der ziehbare Größenänderungsgriff, der in der unteren Ecke einiger Elemente erscheint. |
Praxis
Welche CSS-Eigenschaften werden verwendet, um das Aussehen von Scrollbars zu ändern?