Rullefeltbredde - CSS-triks

Anonim

Den scrollbar-widtheiendom i CSS styrer bredden eller “tykkelsen” av et rullefelt. scrollbar-widther en del av CSS-arbeidsgruppens rullefeltmodul Nivå 1-utkast, som fortsatt er i arbeid. Konsensusen da denne artikkelen ble skrevet, scrollbar-widther sannsynligvis inkludert i fremtidige versjoner av CSS, men det er debatt om et variabelt argument vil være tillatt, eller om alternativene vil være begrenset til forhåndsinnstilte verdier (mer om disse senere) .

Justering av bredden på rullefeltet er spesielt viktig på sider eller brukergrensesnitt med begrenset plass, der å trimme bare noen få piksler fra rullefeltet (eller fjerne det helt) kan gi innholdet nok plass til å puste, uten å fjerne muligheten til å rulle.

For eksempel, forestill deg et tekstredigeringsgrensesnitt der behovene passer i en kort, smal beholder. I en slik situasjon kan rullefeltet ta opp mye av den tilgjengelige plassen:

med scrollbar-width: auto;

Med scrollbar-widthkan vi stille inn bredden for thinå spare litt plass:

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

Eller vi kan stille inn bredden for noneå fjerne den helt, og spare enda mer plass (forutsatt at vi er OK med at rullefeltet forsvinner):

.scrollable-element ( scrollbar-width: none; )
textareamed scrollbar-width: none;- og du kan fortsatt bla!

Syntaks

scrollbar-width: auto | thin | none | ;

Verdier

scrollbar-width aksepterer følgende verdier:

  • auto er standardverdien og gjengir standard rullefelt for brukeragenten.
  • thin vil fortelle brukeragenten å bruke tynnere rullefelt, når det er aktuelt.
  • none vil skjule rullefeltet helt, uten å påvirke elementets rulleevne.
  • blir diskutert, men (hvis lagt til) vil være maksimal bredde på rullefeltet.

Eksempel

Nettleserstøtte

Dette er for generell tilpasning av rullefelt. Se her for å få best mulig design av en rullefelt på tvers.

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
91 * 87 11 88 * TP *

Mobil / nettbrett

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

I slekt

  • scrollbar-gutter
  • scrollbar-color
  • scrollbar

Ressurser

  • CSSWG rullefelt Modulutkast
  • W3C samling av brukstilfeller for modifisering av rullefeltet
  • Fremtiden for CSS: Rullefelt på dev.to
  • w3c Github-diskusjon om rullefeltbreddekontroll