Schuifbalkbreedte - CSS-trucs

Anonim

De scrollbar-widtheigenschap in CSS bepaalt de breedte of "dikte" van een schuifbalk. scrollbar-widthmaakt deel uit van het concept Scrollbars Module Level 1 van de CSS-werkgroep, waaraan nog wordt gewerkt. De consensus op het moment van schrijven van dit artikel is dat het scrollbar-widthwaarschijnlijk zal worden opgenomen in toekomstige versies van CSS, maar er is discussie of een variabel argument zal worden toegestaan, of dat de opties beperkt zullen zijn tot vooraf ingestelde waarden ( daarover later meer) .

Het aanpassen van de breedte van de schuifbalk is vooral belangrijk op pagina's of gebruikersinterfaces met beperkte ruimte, waar het bijsnijden van slechts een paar pixels van de schuifbalk (of helemaal verwijderen) de inhoud voldoende ruimte geeft om te ademen, zonder de mogelijkheid om te scrollen te verwijderen.

Stel je bijvoorbeeld een tekstbewerkingsinterface voor waar de behoeften in een korte, smalle container moeten passen. In een dergelijke situatie kan de schuifbalk een groot deel van de beschikbare ruimte innemen:

met scrollbar-width: auto;

Met scrollbar-widthkunnen we de breedte instellen thinom wat ruimte te besparen:

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

Of we kunnen de breedte instellen op noneom het geheel te verwijderen, waardoor nog meer ruimte wordt bespaard (ervan uitgaande dat we het goed vinden als de schuifbalk verdwijnt):

.scrollable-element ( scrollbar-width: none; )
textareamet scrollbar-width: none;- en je kunt nog steeds scrollen!

Syntaxis

scrollbar-width: auto | thin | none | ;

Waarden

scrollbar-width accepteert de volgende waarden:

  • auto is de standaardwaarde en zal de standaard schuifbalken voor de user-agent weergeven.
  • thin zal de user-agent vertellen om dunnere schuifbalken te gebruiken, indien van toepassing.
  • none zal de schuifbalk volledig verbergen, zonder de schuifbaarheid van het element te beïnvloeden.
  • wordt besproken, maar (indien toegevoegd) zou de maximale breedte van de schuifbalk zijn.

Voorbeeld

Browser-ondersteuning

Dit is voor de algehele aanpasbaarheid van schuifbalken. Kijk hier voor de beste manier om een ​​scrollbar cross-browser te stylen.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
91 * 87 11 88 * TP *

Mobiel / tablet

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

Verwant

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Middelen

  • CSSWG Scrollbars Module concept
  • W3C verzameling use-cases voor schuifbalkmodificatie
  • Toekomst van CSS: schuifbalken op dev.to
  • w3c Github-discussie over schuifbalkbreedtecontrole