Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
CSS-Scrollbalken-Styling
Das CSS-Scrollbalken-Styling-Modul definiert Eigenschaften, die Sie zur visuellen Gestaltung von Scrollbalken verwenden können. Sie können die Breite des Scrollbalkens nach Bedarf anpassen. Außerdem können Sie die Farbe des Scrollbalken-Tracks, also des Hintergrunds des Scrollbalkens, und die Farbe des Scrollbalken-Thumbs, also des ziehbaren Griffs des Scrollbalkens, anpassen.
Scrollbalken-Styling in Aktion
Dieses Beispiel definiert einen schmalen Scrollbalken mit einem roten Thumb und einem orangefarbenen Track. Um den Thumb zu sehen, müssen Sie den Text scrollen. Nachdem der Scrollbalken sichtbar ist, bewegen Sie den Mauszeiger über ihn, um den Track zu sehen.
.poem {
width: 300px;
height: 100px;
border: 1px solid;
}
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
<blockquote class="poem">
<h3>A Small Needful Fact</h3>
<pre>
Is that Eric Garner worked
for some time for the Parks and Rec.
Horticultural Department, which means,
perhaps, that with his very large hands,
perhaps, in all likelihood,
he put gently into the earth
some plants which, most likely,
some of them, in all likelihood,
continue to grow, continue
to do what such plants do, like house
and feed small and necessary creatures,
like being pleasant to touch and smell,
like converting sunlight
into food, like making it easier
for us to breathe.
</pre
>
<p>
- <a href="https://onbeing.org/poetry/a-small-needful-fact/">Ross Gay</a>
</p>
</blockquote>
Hinweis: Bei der Anpassung von Scrollbalken stellen Sie sicher, dass Thumb und Track ausreichend Kontrast zum umgebenden Hintergrund haben. Achten Sie auch darauf, dass der Trefferbereich des Scrollbalkens groß genug für Benutzer ist, die eine Touch-Eingabe verwenden.
Referenz
>CSS-Eigenschaften
Verwandte Konzepte
overflow-blockCSS-Eigenschaftoverflow-inlineCSS-Eigenschaftoverflow-xCSS-Eigenschaftoverflow-yCSS-EigenschaftoverflowCSS-Shorthand-Eigenschaftoverflow-clip-marginCSS-Eigenschaftscrollbar-gutterCSS-Eigenschaftscroll-behaviorCSS-Eigenschaftscroll-marginCSS-Shorthand-Eigenschaftscroll-paddingCSS-Shorthand-Eigenschaftscroll-snap-alignCSS-Eigenschaftscroll-snap-stopCSS-Eigenschaftscroll-snap-typeCSS-Eigenschaft::-webkit-scrollbarPseudo-Element- scroll container Glossarbegriff
scrollbarARIA-Rolle
Spezifikationen
| Specification |
|---|
| CSS Scrollbars Styling Module Level 1> |