Den scrollbar-gutterEiendommen gir fleksibilitet til å bestemme hvordan rommet nettleseren bruker til å vise en scrollbar som samhandler med innholdet på skjermen. Spesifikasjonen beskriver det “å reservere plass til rullefeltet” og det er fornuftig, siden det til slutt er en takrenne: en beholder som reserverer plass til hva som helst i den og skiller den fra andre elementer.
Så vi er alle på samme side, en rullefelt er den tingen som vanligvis er på høyre side av nettleseren (formelt referert til som "brukeragent" - eller UA - i spesifikasjonen) som indikerer rulleposisjonen din i forhold til det totale ledig plass på websiden.
De har tradisjonelt vært en visuell beholder med en glidende indikator. Disse blir referert til som klassiske rullefelt . Indikatoren sitter inne i takrenna, og takrenna tar opp fysisk eiendom på skjermen når den vises.
I det siste har utseende på rullefeltet imidlertid trent mot noe mye mer minimalt. Vi kaller de overliggende rullefeltene, og de er enten delvis eller helt gjennomsiktige mens de sitter på toppen av sideinnholdet. Med andre ord, i motsetning til klassiske rullefelt som tar opp fysisk eiendom på skjermen, sitter overleggsrullefelt på toppen av skjerminnholdet.
Mens vi er i gang, kan rullefelt dukke opp andre steder. Foruten å sitte flush til høyre for nettleseren, vil vi se rullefelt på HTML-elementer der innholdet flyter over elementet og overflowegenskapen (eller overflow-xog overflow-y) er satt til scrollverdien. Og merk at eksistensen av overflow-xmidler vi har horisontal rulling i tillegg til vertikal rulling.
Det er det vi snakker om. Ikke selve indikatoren, men beholderen som holder den. Det er renna. Enten en nettleser bruker en klassisk eller overleggsrullefelt, er det helt opp til UA selv. Det er ikke for oss å bestemme. Slikt gjelder bredden på rullefeltet. Brukeragenten definerer det og gir oss ingen kontroll over det.
Det er der det scrollbar-gutterkommer inn. Vi kan stave ut om takrennen er tilstede i klassiske variasjoner.
Syntaks
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )En dobbel ampersand (&&) skiller to eller flere komponenter, som alle må forekomme, i hvilken som helst rekkefølge.
Et spørsmålstegn (?) Indikerer at forrige type, ord eller gruppe er valgfri (forekommer null eller en gang).
Verdier
auto(startverdi): Ganske mye standardoppførselen som er beskrevet hittil. Ved å sette eiendommen til denne verdien kan klassiske rullefelt konsumere eiendom i brukergrensesnittet på elementer deroverflowegenskapen til disse elementene er satt tilscrollellerauto. Omvendt tar overliggende rullefelt ikke plass i det hele tatt ved å sitte på toppen av elementet.stable: Dette legger til litt meningsfylt oppførsel ved alltid å reservere plass til rullefeltrenna, så lengeoverflowegenskapen på det samme elementet er satt tilscrolleller,autoog vi har å gjøre med en klassisk rullefelt - selv om boksen ikke renner over. Omvendt vil dette ikke ha noen innvirkning på en overleggsrullefelt.always: Dette fungerer på samme måte som,stablemen sørger for at det alltid er reservert plass til rullefeltrenna, uavhengig av om rullefeltet er klassisk eller overlegg, og uansett om innholdet er overfylt eller ikke.both: Dette sier at en rullefeltrenne vil bli plassert på begge sider av elementet når standard takrenne vises. Du kan se hvordan dette kan være nyttig hvis designet ditt krever like avstand på begge sider av elementet.force: Dette er det samme som å anvende bådestableogalwayshvor elementetsoverflower innstilt påauto,scroll,visible,hiddenellerclip.
Working Draft av spesifikasjonen har et super hendig bord som bryter definisjonene ned i deres sammenhenger for å vise forholdet de har til klassiske og overlegg rullefelt.
| Klassiske rullefelt | Overlegg rullefelt | ||||
|---|---|---|---|---|---|
| flyte | rullebarrenne | Overfylt | Ikke overfylt | Overfylt | Ikke overfylt |
| bla | auto | G | G | ||
| stabil | GM | G | |||
| bestandig | G | G | G | G | |
| auto | G | ||||
| stabil | G | G | |||
| bestandig | G | G | G | G | |
| synlig, skjult, klipp | auto | ||||
| stabil | f? | f? | |||
| bestandig | f? | f? | f? | f? | |
"G" representerer tilfeller der det er reservert plass til rullefoten, "f?" tilfeller der plass er reservert for rullefeltrenna hvis kraft ble spesifisert, og tomme celler tilfeller der ingen plass er reservert.
Spesifikasjonsstatus
Den scrollbar-gutterEiendommen er definert i Flow Modul nivå 4, som er i arbeids Draft status. Det betyr at dette fortsatt er et pågående arbeid og kan endres mellom nå og tiden utkastet flyttes til kandidatanbefaling.
Overflow Module nivå 3-spesifikasjonen er også et arbeidsutkast, så det er en god indikasjon på at (1) det vil ta litt tid før scrollbar-gutterden blir en anbefaling, og (2) den fremdeles pågår.
Nettleserstøtte
Det er ingen nettleserstøtte på tidspunktet for den siste oppdateringen.
Mer informasjon
- CSS Overflow Module Level 4 Working Draft
- GitHub-utgave # 92
- CSS-arbeidsgruppen i TPAC: Hva er nytt i CSS? Inkludert et håndtegnet forslag til tabellen som skildrer oppførselen til eiendomsverdiene.