Den scrollbar-gutteregenskapen ger flexibilitet att bestämma hur utrymmet webbläsaren använder för att visa en rullningslist som samverkar med innehållet på skärmen. Specifikationen beskriver det "reservera utrymme för rullningsfältet" och det är vettigt eftersom det i slutändan är vad en ränna är: en behållare som reserverar utrymme för vad som helst i den och skiljer den från andra element.
Så vi är alla på samma sida, en rullningslist är den saken som vanligtvis är till höger i webbläsaren (kallas formellt "användaragenten" - eller UA - i specifikationen) som anger din rullningsposition relativt den totala tillgängligt utrymme på webbsidan.
De har traditionellt varit en visuell behållare med en glidindikator. Dessa kallas klassiska rullningslister . Indikatorn sitter inne i rännan och rännan tar upp fysiska fastigheter på skärmen när den visas.
På senare tid har dock rullningsfönster uppträtt mot något mycket mer minimalt. Vi kallar dessa överläggs rullningslister och de är antingen delvis eller helt genomskinliga när de sitter ovanpå sidinnehållet. Med andra ord, till skillnad från klassiska rullningsfält som tar upp fysiska fastigheter på skärmen, sitter överläggsrulle ovanpå skärminnehållet.
Medan vi håller på med kan rullningsfält dyka upp på andra ställen. Förutom att sitta spolat till höger om webbläsaren kommer vi att se rullningsfält på HTML-element där innehållet flödar över elementet och overflowegenskapen (eller overflow-xoch overflow-y) är inställd på scrollvärdet. Och notera att förekomsten av overflow-xmedel vi har horisontell rullning utöver vertikal rullning.
Det är det vi pratar om. Inte indikatorn i sig, utan behållaren som håller den. Det är rännan. Oavsett om en webbläsare använder en klassisk eller överläggningsrulle är det helt upp till UA själv. Det är inte för oss att bestämma. Så är fallet med rullningslistens bredd. Användaragenten definierar det och ger oss ingen kontroll över det.
Det är där som scrollbar-gutterkommer in. Vi kan stava ut om rännan finns i sina klassiska variationer.
Syntax
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )En dubbel ampersand (&&) separerar två eller flera komponenter, som alla måste förekomma, i valfri ordning.
Ett frågetecken (?) Indikerar att föregående typ, ord eller grupp är valfri (förekommer noll eller en gång).
Värden
auto(initialvärde): Ganska mycket det standardbeteende som hittills beskrivits. Om du ställer in egenskapen till detta värde kan klassiska rullningslister konsumera fastigheter i användargränssnittet på element däroverflowegenskapen för dessa element är inställd påscrollellerauto. Omvänt tar överliggande rullar inget utrymme alls genom att sitta ovanpå elementet.stable: Detta lägger till lite uppfattat beteende genom att alltid reservera utrymme för rullrännan, så längeoverflowegenskapen på samma element är inställd påscrollellerautooch vi har att göra med en klassisk rullningslist - även om rutan inte överflödar. Omvänt kommer detta inte att påverka en överläggsrullefält.always: Detta fungerar på samma sätt som,stablemen säkerställer att utrymme för rullrännan alltid reserveras, oavsett om rullningsfältet är klassiskt eller överlagrat och oavsett om innehållet är överflödigt eller inte.both: Detta anger att en rullrännränna placeras på båda sidor om elementet när standardrännan visas. Du kan se hur detta kan vara till nytta om din design kräver lika avstånd på båda sidor om elementet.force: Detta är detsamma som att applicera bådestableochalwaysdär elementetsoverflowär inställd påauto,scroll,visible,hiddenellerclip.
Arbetsutkastet till specifikationen har en superhändig tabell som bryter ner dessa definitioner i deras sammanhang för att visa förhållandet de har till klassiska och överliggande rullningslister.
| Klassiska rullstänger | Överlägg rullningsfält | ||||
|---|---|---|---|---|---|
| svämma över | rullningsrännränna | Överflöd | Inte överflödig | Överflöd | Inte överflödig |
| skrolla | bil | G | G | ||
| stabil | GM | G | |||
| alltid | G | G | G | G | |
| bil | G | ||||
| stabil | G | G | |||
| alltid | G | G | G | G | |
| synlig, dold, klipp | bil | ||||
| stabil | f? | f? | |||
| alltid | f? | f? | f? | f? | |
"G" representerar fall där utrymme är reserverat för rullrännan, "f?" fall där utrymme är reserverat för rullningsrännan om kraft specificerades och tomma celler fall där inget utrymme är reserverat.
Specifikationsstatus
Den scrollbar-gutteregenskapen är definierad i Overflow Module Nivå 4, som är i Working Draft status. Det betyder att detta fortfarande är ett pågående arbete och kan ändras fram till den tidpunkt då utkastet flyttas till kandidatrekommendationen.
Specifikationen för överflödesmodul nivå 3 är också ett arbetsutkast, så det är en bra indikation på att (1) det tar lite tid för scrollbar-gutteratt bli en rekommendation och (2) att det fortfarande pågår mycket.
Webbläsarstöd
Det finns inget webbläsarsupport vid den senaste uppdateringen.
Mer information
- CSS Overflow Module Level 4 Working Draft
- GitHub nummer # 92
- CSS-arbetsgruppen på TPAC: Vad är nytt i CSS? Innehåller ett handritat förslag för tabellen som beskriver egenskaperna för fastighetsvärdena.