Ši scrollbar-gutterypatybė suteikia lankstumo nustatant, kaip naršyklė naudoja erdvę, kad būtų rodoma slinkties juosta, sąveikaujanti su ekrano turiniu. Specifikacijoje tai apibūdinama kaip „rezervuojanti vietą slinkties juostai“, ir tai yra prasminga, nes galiausiai tai yra latakas: konteineris, kuriame yra vietos viskam, kas jame yra, ir atskiriamas nuo kitų elementų.
Taigi mes visi esame tame pačiame puslapyje, slinkties juosta yra tas dalykas, kuris paprastai yra dešinėje naršyklės pusėje (specifikacijoje oficialiai vadinamas „vartotojo agentu“ arba „UA“), kuris nurodo jūsų slinkties padėtį, palyginti su visu laisvos vietos tinklalapyje.
Tai tradiciškai buvo vaizdinis indas su slankiuoju indikatoriumi. Tai vadinama klasikinėmis slinkties juostomis . Indikatorius yra latako viduje, o latakas ekrane užima fizinį nekilnojamąjį turtą, kai jis rodomas.
Vis dėlto pastaruoju metu slinkties juostų pasirodymai yra linkę į kažką žymiai minimalesnio. Mes vadiname šias perdangos slinkties juostas ir jos yra iš dalies arba visiškai skaidrios sėdint ant puslapio turinio. Kitaip tariant, skirtingai nuo klasikinių slinkties juostų, kurios ekrane užima fizinį nekilnojamąjį turtą, perdangos slinkties juostos sėdi ekrano turinio viršuje.
Kol mes prie jo, slinkties juostos gali pasirodyti kitose vietose. Be to, kad sėdime lygiai naršyklės dešinėje, matysime HTML elementų slinkties juostas, kuriose turinys perpildys elementą, o overflowypatybė (arba overflow-xir overflow-y) bus nustatyta į scrollvertę. Atkreipkite dėmesį, kad egzistuoja overflow-xpriemonės, kurios, be vertikalaus slinkimo, yra horizontalios slinkties.
Apie tai ir kalbame. Ne pats indikatorius, o jį laikanti talpykla. Tai latakas. Ar naršyklė naudoja klasikinę, ar perdangos slinkties juostą, visiškai priklauso nuo paties UA. Tai ne mums spręsti. Tai pasakytina apie slinkties juostos plotį. Vartotojo agentas tai apibrėžia ir nekontroliuoja.
Štai kur scrollbar-gutteratsiranda. Mes galime paaiškinti, ar latakas yra klasikinių ir perdangų variantų.
Sintaksė
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Dvigubas ženklas (&&) atskiria du ar daugiau komponentų, kurie visi turi atsirasti bet kokia tvarka.
Klausiamasis ženklas (?) Rodo, kad ankstesnis tipas, žodis ar grupė yra neprivalomi (įvyksta nulį arba vieną kartą).
Vertybės
auto(pradinė vertė): beveik iki šiol aprašytas numatytasis elgesys. Nustačius nuosavybę į šią vertę, klasikinės slinkties juostos gali naudoti nekilnojamąjį turtą vartotojo sąsajoje elementuose, kuriuoseoverflowšių elementų ypatybė yra nustatytascrollarbaauto. Ir atvirkščiai, perdangos slinkties juostos visiškai neužima vietos sėdėdamos ant elemento viršaus.stable: Tai prideda šiek tiek nusiteikusio elgesio, visada paliekant vietos slinkties juostos latakui, jeioverflowto paties elemento ypatybė yra nustatytascrollarbaautomes dirbame su klasikine slinkties juosta, net jei langelis nėra perpildytas. Ir atvirkščiai, tai neturės įtakos perdangos slinkties juostai.always: Tai veikia taip pat, kaip ir,stabletačiau užtikrina, kad slinkties juostos latakui visada bus rezervuota vieta, neatsižvelgiant į tai, ar slinkties juosta yra klasikinė, ar perdanga, ir nuo to, ar turinys yra perpildytas, ar ne.both: Tai rodo, kad slinkties juostos latakas bus dedamas ant abiejų elemento pusių, kai bus rodomas numatytasis latakas. Galite pamatyti, kaip tai gali būti naudinga, jei jūsų dizainas reikalauja vienodo atstumo tarp abiejų elemento pusių.force: Tai yra tas pats, kaip taikant tiekstableiralways, kai elementooverflowyra nustatytas įauto,scroll,visible,hiddenarbaclip.
Specifikacijos darbiniame juodraštyje yra labai patogi lentelė, kurioje šie apibrėžimai suskirstyti į jų kontekstus, kad būtų parodytas jų santykis su klasikinėmis ir perdengiamomis slinkties juostomis.
| Klasikinės slinkties juostos | Perdėkite slinkties juostas | ||||
|---|---|---|---|---|---|
| perpildyti | slinkties juosta | Perpildyta | Ne perpildyta | Perpildyta | Ne perpildyta |
| slinkti | automatinis | G | G | ||
| stabilus | GM | G | |||
| visada | G | G | G | G | |
| automatinis | G | ||||
| stabilus | G | G | |||
| visada | G | G | G | G | |
| matomas, paslėptas, klipas | automatinis | ||||
| stabilus | f? | f? | |||
| visada | f? | f? | f? | f? | |
„G“ reiškia atvejus, kai vietos yra skirta slinkties juostos latakui, „f?“ atvejai, kai vietos yra skirta slinkties juostos latakui, jei buvo nurodyta jėga, ir tuščių langelių atvejai, kai vietos nėra.
Specifikacijos būsena
scrollbar-gutterTurtas yra apibrėžtas Perpildyta modulio 4 lygis, kuris yra darbo statuso projektas. Tai reiškia, kad tai dar nebaigtas darbas ir gali pasikeisti nuo tada, kai projektas bus perkeltas į rekomendaciją kandidatams.
3 lygio perpildymo modulio specifikacija taip pat yra darbinis projektas, todėl tai gerai parodo, kad (1) prireiks šiek tiek laiko, scrollbar-gutterkol ji taps rekomendacija, ir (2) ji vis dar vyksta.
Naršyklės palaikymas
Paskutinio atnaujinimo metu nėra naršyklės palaikymo.
Daugiau informacijos
- CSS perpildymo modulio 4 lygio darbo projektas
- „GitHub“ numeris Nr. 92
- TPAC CSS darbo grupė: kas naujo CSS? Įtraukite ranka sudarytą lentelės pasiūlymą, kuriame aprašoma nuosavybės verčių elgsena.