Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
CSS-Scrollleisten-Styling
Das CSS-Scrollleisten-Styling-Modul definiert Eigenschaften, die Sie für das visuelle Styling von Scrollleisten verwenden können. Sie können die Breite der Scrollleiste nach Bedarf anpassen. Sie können auch die Farbe der Scrollleisten-Schiene anpassen, die der Hintergrund der Scrollleiste ist, sowie die Farbe der Scrollleisten-Daumen, der der ziehbare Griff der Scrollleiste ist.
Scrollleisten-Styling in Aktion
Dieses Beispiel definiert eine dünne Scrollleiste mit einem roten Daumen und einer orangefarbenen Schiene. Um den Daumen zu sehen, müssen Sie den Text scrollen. Nachdem die Scrollleiste sichtbar ist, fahren Sie mit der Maus darüber, um die Schiene 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: Wenn Sie Scrollleisten anpassen, stellen Sie sicher, dass der Daumen und die Schiene genügend Kontrast zum umgebenden Hintergrund haben. Stellen Sie auch sicher, dass der Bereich, in dem die Scrollleiste aktiv ist, groß genug für Personen ist, die Touch-Eingaben verwenden.
Referenz
>CSS-Eigenschaften
Verwandte Konzepte
overflow-blockCSS-Eigenschaftoverflow-inlineCSS-Eigenschaftoverflow-xCSS-Eigenschaftoverflow-yCSS-EigenschaftoverflowCSS-Kurzschrift-Eigenschaftoverflow-clip-marginCSS-Eigenschaftscrollbar-gutterCSS-Eigenschaftscroll-behaviorCSS-Eigenschaftscroll-marginCSS-Kurzschrift-Eigenschaftscroll-paddingCSS-Kurzschrift-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> |