Den scrollbar-gutteregenskab giver fleksibilitet til at bestemme, hvordan rummet browseren bruger til at vise en scrollbar der interagerer med indholdet på skærmen. Specifikationen beskriver det "reservere plads til rullebjælken", og det giver mening, da det i sidste ende er, hvad en tagrender er: en container, der reserverer plads til hvad der er i den og adskiller den fra andre elementer.
Så vi er alle på samme side, en rullebjælke er den ting, der typisk er i højre side af browseren (formelt benævnt "brugeragenten" - eller UA - i specifikationen), der angiver din rulleposition i forhold til det samlede antal ledig plads på websiden.
Disse har traditionelt været en visuel beholder med en glidende indikator. Disse kaldes klassiske rullebjælker . Indikatoren sidder inde i tagrenden, og tagrenden optager fysisk fast ejendom på skærmen, når den vises.
På det seneste har udseende på rullebjælker dog tendens til at være meget mere minimal. Vi kalder disse overlay rullebjælker, og de er enten delvist eller helt gennemsigtige, når de sidder oven på sideindholdet. Med andre ord, i modsætning til klassiske rullepaneler, der optager fysisk fast ejendom på skærmen, sidder overlay rullebjælker oven på skærmens indhold.
Mens vi er ved det, kan rullebjælker dukke op andre steder. Udover at sidde skyllet til højre for browseren, ser vi rullepaneler på HTML-elementer, hvor indholdet overløber elementet, og overflowejendommen (eller overflow-xog overflow-y) er indstillet til scrollværdien. Og bemærk, at eksistensen af overflow-xmidler, vi har vandret rulning ud over lodret rulning.
Det er det, vi taler om. Ikke selve indikatoren, men beholderen, der holder den. Det er tagrenden. Uanset om en browser bruger en klassisk eller overlay-rullepanel, er det helt op til UA selv. Det er ikke vores beslutning. Sådan gælder for rullebjælkens bredde. Brugeragenten definerer det og giver os ingen kontrol over det.
Det er her, der scrollbar-gutterkommer ind. Vi kan stave, om tagrenden er til stede i dens klassiske variationer og overlay.
Syntaks
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )En dobbelt ampersand (&&) adskiller to eller flere komponenter, som alle skal forekomme, i en hvilken som helst rækkefølge.
Et spørgsmålstegn (?) Angiver, at den foregående type, ord eller gruppe er valgfri (forekommer nul eller en gang).
Værdier
auto(startværdi): Næsten meget den hidtidige standardadfærd, der er beskrevet. Ved at indstille ejendommen til denne værdi kan klassiske rullebjælker forbruge fast ejendom i brugergrænsefladen på elementer, hvoroverflowegenskaben for disse elementer er indstillet tilscrollellerauto. Omvendt tager overlay-rullebjælker slet ikke plads ved at sidde oven på elementet.stable: Dette tilføjer en lille meningsfuld opførsel ved altid at reservere plads til rullepanelrenden, så længeoverflowejendommen på det samme element er indstillet til,scrollellerautovi har at gøre med en klassisk rullepanel - selv når boksen ikke er overfyldt. Omvendt har dette ingen indflydelse på en overlay-rullepanel.always: Dette fungerer på samme måde som,stablemen sikrer, at der altid er plads til rullepanelrenden, uanset om rullepanelet er klassisk eller overlay, og uanset om indholdet er overfyldt eller ej.both: Dette angiver, at en rullepanelrender placeres på begge sider af elementet, når standardrenden vises. Du kan se, hvordan dette kan være nyttigt, hvis dit design kræver lige mellemrum på begge sider af elementet.force: Dette er det samme som at anvende bådestableogalwayshvor elementetsoverflower indstillet tilauto,scroll,visible,hiddenellerclip.
Working Draft af spec har et super praktisk bord, der nedbryder disse definitioner i deres sammenhæng for at vise det forhold, de har til klassiske og overlay rullepaneler.
| Klassiske rullebjælker | Overlay rullepaneler | ||||
|---|---|---|---|---|---|
| flyde over | rullepanel-tagrender | Overfyldt | Ikke overfyldt | Overfyldt | Ikke overfyldt |
| rul | auto | G | G | ||
| stabil | GM | G | |||
| altid | G | G | G | G | |
| auto | G | ||||
| stabil | G | G | |||
| altid | G | G | G | G | |
| synlig, skjult, klip | auto | ||||
| stabil | f? | f? | |||
| altid | f? | f? | f? | f? | |
"G" repræsenterer tilfælde, hvor der er reserveret plads til rullebjælkerenden, "f?" tilfælde, hvor plads er reserveret til rullebjælkerenden, hvis der er angivet kraft, og tomme celler tilfælde, hvor der ikke er plads reserveret.
Specifikationsstatus
Den scrollbar-gutteregenskab er defineret i Overflow Modul niveau 4, som er i Working Udkast status. Det betyder, at dette stadig er et igangværende arbejde og kan ændre sig fra nu til det tidspunkt, hvor udkastet flytter til kandidatanbefaling.
Overflow Module Level 3-specifikationen er også et Working Draft, så det er en god indikation af, at (1) det tager noget tid scrollbar-gutterat blive en anbefaling, og (2) det stadig er meget i gang.
Browsersupport
Der er ingen browsersupport på tidspunktet for den sidste opdatering.
Mere information
- CSS Overflow Module Level 4 Working Draft
- GitHub-udgave # 92
- CSS-arbejdsgruppen hos TPAC: Hvad er nyt i CSS? Inkluderet et håndtegnet forslag til tabellen, der beskriver egenskabernes værdier.