Bildlaufleistenbreite - CSS-Tricks

Anonim

Die scrollbar-widthEigenschaft in CSS steuert die Breite oder „Dicke“ einer Bildlaufleiste. scrollbar-widthist Teil des Entwurfs der Scrollbars Module Level 1 der CSS-Arbeitsgruppe, der noch in Arbeit ist. Zum Zeitpunkt des Schreibens dieses Artikels besteht Konsens darüber, dass dies scrollbar-widthwahrscheinlich in zukünftigen Versionen von CSS enthalten sein wird. Es wird jedoch diskutiert, ob ein variables Argument zulässig ist oder ob die Optionen auf voreingestellte Werte beschränkt sind (dazu später mehr). .

Das Anpassen der Breite der Bildlaufleiste ist besonders wichtig bei Seiten oder Benutzeroberflächen mit begrenztem Speicherplatz, bei denen das Trimmen von nur wenigen Pixeln von der Bildlaufleiste (oder das Entfernen insgesamt) dem Inhalt genügend Raum zum Atmen geben kann, ohne dass die Bildlauffähigkeit beeinträchtigt wird.

Stellen Sie sich zum Beispiel eine Textbearbeitungsoberfläche vor, bei der die Anforderungen in einen kurzen, schmalen Container passen. In einer solchen Situation kann die Bildlaufleiste einen Großteil des verfügbaren Speicherplatzes einnehmen:

mit scrollbar-width: auto;

Mit scrollbar-widthkönnen wir die Breite auf einstellen thin, um Platz zu sparen:

.scrollable-element ( scrollbar-width: thin; )
textarea mit scrollbar-width: thin;

Oder wir können die Breite so einstellen none, dass sie vollständig entfernt wird, wodurch noch mehr Platz gespart wird (vorausgesetzt, die Bildlaufleiste verschwindet)):

.scrollable-element ( scrollbar-width: none; )
textareamit scrollbar-width: none;- und du kannst immer noch scrollen!

Syntax

scrollbar-width: auto | thin | none | ;

Werte

scrollbar-width akzeptiert die folgenden Werte:

  • auto ist der Standardwert und rendert die Standard-Bildlaufleisten für den Benutzeragenten.
  • thin weist den Benutzeragenten an, gegebenenfalls dünnere Bildlaufleisten zu verwenden.
  • none blendet die Bildlaufleiste vollständig aus, ohne die Bildlauffähigkeit des Elements zu beeinträchtigen.
  • wird diskutiert, aber (falls hinzugefügt) wäre eine maximale Breite der Bildlaufleiste.

Beispiel

Browser-Unterstützung

Dies dient der allgemeinen Anpassbarkeit von Bildlaufleisten. Informationen zur Gestaltung eines Cross-Browsers in der Bildlaufleiste finden Sie hier.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
91 * 87 11 88 * TP *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * Nein 81 * 14.0-14.4 *

verbunden

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Ressourcen

  • CSSWG Scrollbars Modulentwurf
  • W3C-Sammlung von Anwendungsfällen für die Änderung der Bildlaufleiste
  • Zukunft von CSS: Bildlaufleisten auf dev.to.
  • w3c Github-Diskussion zur Steuerung der Bildlaufleistenbreite