scrollbar-width

Diescrollbar-widthEigenschaft in CSS steuert die Breite oder „Dicke“ einer Scrollleiste. scrollbar-width ist Teil des CSS Working Group’s Scrollbars Module Level 1 Entwurfs, der sich noch in der Entwicklung befindet. Der Konsens zum Zeitpunkt der Erstellung dieses Artikels ist, dass scrollbar-width wahrscheinlich in zukünftigen Versionen von CSS enthalten sein wird, aber es gibt Diskussionen darüber, ob ein variabler <length>-Argument erlaubt sein wird oder ob die Optionen auf vordefinierte Werte beschränkt sein werden (mehr dazu später).

Die Anpassung der Breite der Scrollleiste ist besonders wichtig auf Seiten oder Benutzeroberflächen mit begrenztem Platz, wo das Kürzen nur weniger Pixel von der Scrollleiste (oder deren vollständiges Entfernen) dem Inhalt genügend Raum zum Atmen geben kann, ohne die Möglichkeit zum Scrollen zu entfernen.

Stellen Sie sich zum Beispiel eine Textbearbeitungsoberfläche vor, bei der die <textarea> in einen kurzen, schmalen Container passen muss. In einer solchen Situation kann die Scrollleiste viel des verfügbaren Platzes beanspruchen.

Mit scrollbar-width können wir die Breite auf thin setzen, um etwas Platz zu sparen.

.scrollable-element {
  scrollbar-width: thin;
}

Oder wir können die Breite auf none setzen, um sie vollständig zu entfernen und noch mehr Platz zu sparen (vorausgesetzt, wir sind damit einverstanden, dass die Scrollleiste verschwindet).

.scrollable-element {
  scrollbar-width: none;
}

Syntax

scrollbar-width: auto | thin | none | <length>;

Werte

scrollbar-width akzeptiert die folgenden Werte.

• auto ist der Standardwert und rendert die Standard-Scrollleisten des User-Agents.
• thin weist den User-Agent an, dünnere Scrollleisten zu verwenden, wenn anwendbar.
• none blendet die Scrollleiste vollständig aus, ohne die Scrollbarkeit des Elements zu beeinträchtigen.
• <length> wird diskutiert, wäre aber (wenn hinzugefügt) eine maximale Breite der Scrollleiste.

Beispiel

Browser-Unterstützung

Dies dient der allgemeinen Anpassbarkeit von Scrollleisten. Für die beste cross-browser Scrollleisten-Formatierung, sehen Sie hier.

Verwandt

• scrollbar-gutter
• scrollbar-color
• scrollbar

Ressourcen

• CSSWG Scrollbars Module Entwurf
• W3C Sammlung von Anwendungsfällen für die Scrollleisten-Modifikation
• Zukunft von CSS: Scrollleisten auf dev.to
• w3c Github-Diskussion über die Steuerung der Scrollleistenbreite