Drsna širina - CSS-triki

Anonim

scrollbar-widthHotel v CSS nadzoruje širino ali »debelino« drsnega traku. scrollbar-widthje del osnutka modula drsnikov delovne skupine CSS na ravni 1, ki še vedno poteka. Soglasje v času pisanja tega članka je scrollbar-widthverjetno, da bo vključeno v prihodnje različice CSS-ja, vendar obstajajo razprave o tem, ali bo dovoljen argument spremenljivke ali pa bodo možnosti omejene na prednastavljene vrednosti (več o teh kasneje) .

Prilagoditev širine drsnega traku je še posebej pomembna na straneh ali v uporabniških vmesnikih z omejenim prostorom, kjer lahko obrezovanje le nekaj slikovnih pik z drsnega traku (ali njegovo popolno odstranitev) vsebini omogoči dovolj prostora za dih, ne da bi pri tem odstranili možnost drsenja.

Za primer si predstavljamo vmesnik za urejanje besedila, kjer se potrebe prilegajo v kratek, ozek vsebnik. V takem primeru lahko drsnik zavzame veliko razpoložljivega prostora:

s scrollbar-width: auto;

Z scrollbar-widthlahko nastavimo širino na, thinda prihranimo nekaj prostora:

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

Lahko pa nastavimo širino, da nonejo v celoti odstranimo, s čimer prihranimo še več prostora (ob predpostavki, da imamo drsni trak v redu):

.scrollable-element ( scrollbar-width: none; )
textareaz scrollbar-width: none;- in še vedno se lahko pomikate!

Sintaksa

scrollbar-width: auto | thin | none | ;

Vrednote

scrollbar-width sprejema naslednje vrednosti:

  • auto je privzeta vrednost in bo upodobila standardne drsnike za uporabniškega agenta.
  • thin bo uporabniškemu agentu naročil, naj uporabi tanjše drsnike, kadar je to primerno.
  • none bo drsni trak popolnoma skril, ne da bi to vplivalo na drsnost elementa.
  • se razpravlja, vendar bi bila (če bi jo dodali) največja širina drsnega traku.

Primer

Podpora za brskalnik

To je namenjeno splošni prilagodljivosti drsnih trakov. Za najboljši stavni slog drsnega traku v brskalniku glejte tukaj.

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
91 * 87 11. 88 * TP *

Mobilni / tablični računalnik

Android Chrome Android Firefox Android iOS Safari
88 * Ne 81 * 14,0-14,4 *

Sorodno

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Viri

  • Osnutek modula drsnih trakov CSSWG
  • Zbirka primerov uporabe W3C za spreminjanje drsnika
  • Prihodnost CSS-ja: drsni trakovi na od do
  • w3c Githubova razprava o nadzoru širine drsnika