A scrollbar-guttertulajdonság rugalmasságot biztosít annak meghatározásához, hogy a böngésző milyen helyet használ a görgetősáv megjelenítéséhez, amely kölcsönhatásba lép a képernyőn megjelenő tartalommal. A specifikáció leírja, hogy „helyet foglal a gördítősávnak”, és ennek van értelme, mivel végül is ez az ereszcsatorna: egy konténer, amely helyet foglal bárminek, ami benne van, és elválasztja más elemektől.
Tehát mindannyian ugyanazon az oldalon vagyunk, egy gördítősáv az a dolog, amely általában a böngésző jobb oldalán található (amelyet a specifikációban hivatalosan "felhasználói ügynöknek" vagy "UA" -nak neveznek), amely jelzi a görgetési pozíciót az összeshez képest rendelkezésre álló hely a weboldalon.
Ezek hagyományosan vizuális konténerek voltak csúszó mutatóval. Ezeket klasszikus görgetősávoknak nevezzük . A kijelző az ereszcsatorna belsejében helyezkedik el, és a csatorna fizikai ingatlanokat vesz fel a képernyőn, amikor megjelenik.
Az utóbbi időben azonban a gördítősáv megjelenése valami sokkal minimálisabb irányba mutat. Hívjuk ezeket az átfedő gördítősávokat , amelyek részben vagy teljesen átlátszók, miközben az oldal tetején ülnek. Más szavakkal, ellentétben a klasszikus gördítősávokkal, amelyek fizikai ingatlant vesznek fel a képernyőn, az átfedéses gördítősávok a képernyő tetején helyezkednek el.
Amíg itt tartunk, a gördítősávok más helyeken is felbukkanhatnak. A böngészőtől jobbra süllyedés mellett gördítősávokat fogunk látni a HTML-elemeken, ahol a tartalom túlcsordítja az elemet, és a overflowtulajdonság (vagy overflow-xés overflow-y) az scrollértékre van állítva . És vegye figyelembe, hogy a overflow-xfüggőleges görgetés mellett vízszintes görgetés is létezik .
Erről beszélünk. Nem maga a mutató, hanem az azt tartó tartály. Ez az ereszcsatorna. Az, hogy egy böngésző klasszikus vagy átfedéses gördítősávot használ-e, teljesen maga az UA feladata. Ezt nem nekünk kell eldöntenünk. Ez igaz a gördítősáv szélességére. A felhasználói ügynök ezt definiálja, és nem ad nekünk semmilyen irányítást.
Ott scrollbar-gutterjön be. Meg tudjuk mondani, hogy a csatorna van-e benne klasszikus és overlay variációkban.
Szintaxis
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )A kettős jel (&&) két vagy több komponenst választ el, amelyeknek minden sorrendben meg kell történniük.
A kérdőjel (?) Azt jelzi, hogy az előző típus, szó vagy csoport választható (nulla vagy egyszer előfordul).
Értékek
auto(kezdeti érték): Nagyjából az eddig leírt alapértelmezett viselkedés. Ha a tulajdonságot erre az értékreoverflowállítja, akkor a klasszikus gördítősávok ingatlanokat fogyaszthatnak a felhasználói felületen olyan elemeken, amelyeknél az elemek tulajdonságátscrollvagy értékre állítjákauto. Ezzel szemben az átfedéses gördítősávok egyáltalán nem foglalnak helyet az elem tetejére ülve.stable: Ez hozzáad egy kis véleményes magatartást azáltal, hogy mindig helyet foglal a gördítősáv ereszcsatornájának, mindaddig, amígoverflowugyanazon az elemen a tulajdonság értékescrollvagy értékeautovan, és egy klasszikus gördítősávval van dolgunk - akkor is, ha a doboz nem túlcsordult. Ezzel szemben ez nem befolyásolja az átfedéses gördítősávot.always: Ez ugyanúgy működik, mint,stablede biztosítja, hogy a gördítősáv eresze mindig legyen lefoglalva, függetlenül attól, hogy a gördítősáv klasszikus vagy átfedésben van-e, és függetlenül attól, hogy a tartalom túlcsordult-e vagy sem.both: Ez azt állítja, hogy az alapértelmezett ereszcsatorna megjelenítésekor egy gördítősáv csatorna kerül az elem mindkét oldalára. Láthatja, hogy ez hogyan jöhet jól, ha a tervezése egyenlő távolságot igényel az elem mindkét oldalán.force: Ez ugyanaz, mint a megállapítás egyarántstable, ésalwaysahol az elemoverflowvan állítvaauto,scroll,visible,hiddenvagyclip.
A specifikáció Working Draft-ja egy rendkívül praktikus táblázattal rendelkezik, amely ezeket a definíciókat összefüggéseikre bontja, hogy megmutassa a klasszikus és az átfedéses gördítősávokhoz való viszonyukat.
| Klasszikus gördítősávok | Overlay gördítősávok | ||||
|---|---|---|---|---|---|
| túlcsordulás | görgetősáv-ereszcsatorna | Túláradó | Nem áradó | Túláradó | Nem áradó |
| tekercs | auto | G | G | ||
| stabil | GM | G | |||
| mindig | G | G | G | G | |
| auto | G | ||||
| stabil | G | G | |||
| mindig | G | G | G | G | |
| látható, rejtett, klip | auto | ||||
| stabil | f? | f? | |||
| mindig | f? | f? | f? | f? | |
A „G” azokat az eseteket jelöli, amikor a görgetősáv ereszcsatorna számára van fenntartva hely, „f?” esetek, amikor a gördítősáv ereszének van helye fenntartva, ha erő van megadva, és üres cellák, ahol nincs hely.
Specifikáció állapota
A scrollbar-guttertulajdonságot a 4. túlcsordulási modul határozza meg, amely Working Draft állapotban van. Ez azt jelenti, hogy ez még folyamatban lévő munka, és változhat a tervezetnek a jelöltajánlásra való áttéréséig.
a túlfolyó modul 3. szintű specifikációja munkadokumentum is, így ez jól jelzi, hogy (1) eltart egy ideig, mire scrollbar-gutterajánlássá válik, és (2) még mindig nagyon folyamatban van.
Böngésző támogatás
A legutóbbi frissítéskor nincs böngészőtámogatás.
Több információ
- CSS túlcsordulási modul, 4. szintű munkavázlat
- GitHub 92. szám
- A TPS CSS munkacsoportja: A CSS újdonságai Beleértve egy kézzel rajzolt javaslatot a táblához, amely felvázolja a tulajdonságértékek viselkedését.