scrollbar-gutterLastnost omogoča fleksibilnost ugotoviti, kako je prostor brskalnik uporablja za prikaz drsni trak, ki sodeluje z vsebino na zaslonu. Specifikacija opisuje, da "rezervira prostor za drsni trak" in to je smiselno, saj je to v bistvu žleb: vsebnik, ki rezervira prostor za vse, kar je v njem, in ga loči od drugih elementov.
Vsi smo torej na isti strani, drsni trak je tista stvar, ki je običajno na desni strani brskalnika (v specifikaciji se formalno imenuje »uporabniški agent« - UA), ki označuje vaš položaj drsenja glede na skupno razpoložljivega prostora na spletni strani.
To je bila tradicionalno vizualna posoda z drsnim indikatorjem. Ti se imenujejo klasični drsniki . Indikator se nahaja znotraj žleba in žleb zasede fizične nepremičnine na zaslonu, ko je prikazan.
V zadnjem času pa se pojavljanje drsnikov usmerja v nekaj bolj minimalnega. Te prekrivne drsnike imenujemo in so delno ali popolnoma pregledne, medtem ko sedijo na vrhu vsebine strani. Z drugimi besedami, za razliko od klasičnih drsnih trakov, ki zasedajo fizično nepremičnino na zaslonu, drsni trakovi s prekrivanjem sedijo na vrhu vsebine zaslona.
Ko smo že pri tem, se lahko drsni trakovi pojavijo tudi drugje. Poleg sedenja na desni strani brskalnika bomo na elementih HTML videli drsne trakove, kjer vsebina preplavi element, overflowlastnost (ali overflow-xin overflow-y) pa je nastavljena na scrollvrednost. In upoštevajte, da obstoj overflow-xpomeni, da imamo poleg navpičnega tudi vodoravno drsenje.
O tem govorimo. Ne indikator sam, ampak posoda, ki ga drži. To je žleb. Ali bo brskalnik uporabljal klasični drsni trak ali prekrivanje, je povsem odvisno od samega UA. O tem se ne odločimo sami. To velja za širino drsnika. Uporabniški agent to opredeli in nam ne daje nobenega nadzora nad tem.
Tu scrollbar-guttervstopi. Lahko določimo, ali je žleb prisoten v svojih klasičnih in prekrivnih različicah.
Sintaksa
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Dvojni znak & (&&) ločuje dve ali več komponent, ki se morajo vse pojaviti, v poljubnem vrstnem redu.
Vprašalnik (?) Pomeni, da je prejšnja vrsta, beseda ali skupina neobvezna (pojavi se nič ali enkrat).
Vrednote
auto(začetna vrednost): Precej do sedaj opisanega privzetega vedenja. Če lastnost nastavite na to vrednost, lahko klasični drsni trakovi porabijo nepremičnine v uporabniškem vmesniku na elementih, kjer jeoverflowlastnost teh elementov nastavljena nascrollozauto. Nasprotno pa drsni trakovi s prekrivanjem sploh ne zavzamejo prostora, tako da sedijo na vrhu elementa.stable: To doda malo samozavestnega vedenja, tako da vedno rezervirate prostor za drsni drsnik, če jeoverflowlastnost istega elementa nastavljena nascrollaliautoin imamo opravka s klasičnim drsnim trakom - tudi če polje ni preplavljeno. Nasprotno pa to ne bo vplivalo na drsni trak prekrivanja.always: To deluje enako,stablevendar zagotavlja, da je prostor za žleb drsnika vedno rezerviran, ne glede na to, ali je drsnik klasičen ali prekriven in ne glede na to, ali vsebina preplavlja ali ne.both: To navaja, da bo drsni drsnik postavljen na obe strani elementa, ko bo prikazan privzeti žleb. Vidite lahko, kako je to lahko koristno, če vaš dizajn zahteva enak razmik na obeh straneh elementa.force: To je enako kot da se nanaša takostableinalwaysče je element jeoverflownastavljena naauto,scroll,visible,hiddenaliclip.
Delovni osnutek specifikacije ima izjemno priročno tabelo, ki te definicije razdeli v njihov kontekst, da pokaže odnos, ki ga imajo do klasičnih in prekrivnih drsnih trakov.
| Klasični drsniki | Drsni trakovi s prekrivanjem | ||||
|---|---|---|---|---|---|
| prelivanje | drsni žleb | Preliven | Ne prelivajo | Preliven | Ne prelivajo |
| pomaknite se | samodejno | G | G | ||
| stabilno | GM | G | |||
| nenehno | G | G | G | G | |
| samodejno | G | ||||
| stabilno | G | G | |||
| nenehno | G | G | G | G | |
| viden, skrit, posnetek | samodejno | ||||
| stabilno | f? | f? | |||
| nenehno | f? | f? | f? | f? | |
"G" predstavlja primere, ko je prostor za drsni žleb rezerviran, "f?" primeri, ko je za drsni drsnik rezerviran prostor, če je bila določena sila, in primeri praznih celic, kjer ni rezerviran noben prostor.
Stanje specifikacije
scrollbar-gutterNepremičnina se določi v Overflow modula 4. stopnjo, ki je v delovnem osnutku stanju. To pomeni, da to še vedno poteka in bi se lahko spremenilo od zdaj do trenutka, ko se osnutek premakne na priporočilo kandidatov.
specifikacija modula Overflow Level 3 je tudi delovni osnutek, zato je to dober pokazatelj, da (1) bo trajalo nekaj časa, scrollbar-gutterda postane priporočilo, in (2) je še vedno v teku.
Podpora za brskalnik
V času zadnje posodobitve ni podpore za brskalnik.
Več informacij
- Delovni osnutek modula prelivanja CSS 4. stopnje
- GitHub številka 92
- Delovna skupina CSS pri TPAC: Kaj je novega v CSS? Vključno z risanim predlogom za tabelo, ki opisuje vedenje vrednosti lastnosti.