Den scrollbar-widthegendom i CSS styr bredden eller ”tjocklek” av en scrollbar. scrollbar-widthingår i CSS-arbetsgruppens utkast för rullningsfältmodul nivå 1, som fortfarande pågår. Konsensusen vid tidpunkten för denna artikel är att det scrollbar-widthtroligtvis kommer att ingå i framtida versioner av CSS, men det diskuteras om ett variabelt argument kommer att tillåtas, eller om alternativen kommer att begränsas till förinställda värden (mer om dem senare) .
Att justera rullningens bredd är särskilt viktigt på sidor eller användargränssnitt med begränsat utrymme, där trimning av bara några pixlar från rullningsfältet (eller tar bort det helt) kan ge innehållet tillräckligt med utrymme för att andas, utan att ta bort möjligheten att rulla.
För ett exempel, föreställ dig ett textredigeringsgränssnitt där behovet ska passa i en kort, smal behållare. I en sådan situation kan rullningsfältet ta upp mycket av det tillgängliga utrymmet:
scrollbar-width: auto;
Med scrollbar-widthkan vi ställa in bredden för thinatt spara utrymme:
.scrollable-element ( scrollbar-width: thin; )
textarea med scrollbar-width: thin;
Eller så kan vi ställa in bredden för noneatt ta bort den helt och spara ännu mer utrymme (förutsatt att vi är okej när rullningsfältet försvinner):
.scrollable-element ( scrollbar-width: none; )
textareamed scrollbar-width: none;- och du kan fortfarande rulla!
Syntax
scrollbar-width: auto | thin | none | ; Värden
scrollbar-width accepterar följande värden:
autoär standardvärdet och kommer att göra standardrullfält för användaragenten.thinkommer att berätta användaragenten att använda tunnare rullningslister, när det är tillämpligt.nonedöljer rullningsfältet helt utan att det påverkar elementets rullbarhet.debatteras, men (om det läggs till) skulle det vara en maximal bredd i rullningsfältet.
Exempel
Webbläsarstöd
Detta är för övergripande anpassningsbarhet av rullningsfält. Se här om du vill utforma en webbläsare i rullningsfältet.
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 91 * | 87 | 11 | 88 * | TP * |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | Nej | 81 * | 14,0-14,4 * |
Relaterad
scrollbar-gutterscrollbar-colorscrollbar
Resurser
- CSSWG Scrollbars Modulutkast
- W3C samling av användningsfall för ändring av rullningslisten
- Framtiden för CSS: Scrollbars on dev.to
- w3c Github-diskussion om rullningsbreddskontroll