Táto scrollbar-guttervlastnosť poskytuje flexibilitu na určenie toho, ako miesto, ktoré prehľadávač používa na zobrazenie posúvača, ktorý interaguje s obsahom na obrazovke. Špecifikácia to popisuje ako „vyhradenie miesta pre posuvný panel“ a to dáva zmysel, pretože to je v konečnom dôsledku odkvap: kontajner, ktorý vyhradzuje priestor pre čokoľvek, čo je v ňom, a oddeľuje ho od ostatných prvkov.
Všetci sme teda na jednej stránke, posúvač je tá vec, ktorá sa zvyčajne nachádza na pravej strane prehliadača (v špecifikácii formálne označovanej ako „používateľský agent“ - alebo UA) a označuje vašu pozíciu posuvu vzhľadom na celkovú dostupné miesto na webovej stránke.
Boli to tradične vizuálny kontajner s posuvným indikátorom. Označujú sa ako klasické posuvné lišty . Indikátor je umiestnený vo vnútri žľabu a žľab pri zobrazení zaberá fyzický majetok na obrazovke.
V poslednej dobe však vzhľad posuvného pruhu smeroval k niečomu oveľa minimálnejšiemu. Tieto prekrytie nazývame posuvné pruhy, ktoré sú čiastočne alebo úplne priehľadné, keď sú umiestnené na vrchu obsahu stránky. Inými slovami, na rozdiel od klasických posuvných pruhov, ktoré zaberajú fyzický majetok na obrazovke, prekryté posuvné pruhy sedia na vrchu obsahu obrazovky.
Keď už sme pri tom, na iných miestach sa môžu vysunúť posuvníky. Okrem toho, že sa nachádzate zarovno vpravo od prehliadača, uvidíme na prvkoch HTML posuvné pruhy, kde obsah preteká prvkom a overflowvlastnosť (alebo overflow-xa overflow-y) je nastavená na scrollhodnotu. A všimnite si, že existencia overflow-xprostriedkov má okrem vertikálneho rolovania aj vodorovné posúvanie.
To je to, o čom hovoríme. Nie samotný indikátor, ale nádoba, ktorá ho drží. To je žľab. Či prehliadač používa klasický alebo prekryvný posuvný panel, je úplne na samotnom UA. To nie je na nás, aby sme sa rozhodli. To platí pre šírku posuvného pruhu. Používateľský agent to definuje a nedáva nám nad nimi žiadnu kontrolu.
To je miesto, kam scrollbar-gutterpríde. Môžeme vysvetliť, či je žľab prítomný v jeho klasických a prekrytých variantoch.
Syntax
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Dvojitý ampersand (&&) oddeľuje dva alebo viac komponentov, pričom všetky sa musia vyskytovať v ľubovoľnom poradí.
Otazník (?) Označuje, že predchádzajúci typ, slovo alebo skupina sú voliteľné (vyskytuje sa nula alebo jedenkrát).
Hodnoty
auto(počiatočná hodnota): Doposiaľ popísané predvolené správanie. Nastavenie vlastnosti na túto hodnotu umožňuje klasickým posuvníkom spotrebovať nehnuteľnosť v používateľskom rozhraní na prvkoch, kde jeoverflowvlastnosť týchto prvkov nastavená nascrollaleboauto. Naopak, prekrytie posuvných pruhov nezaberá vôbec žiadne miesto sedením na vrchu prvku.stable: Toto pridáva trochu namysleného správania tým, že sa vždy vyhradzuje priestor pre odkvap posuvného pruhu, pokiaľ jeoverflowvlastnosť toho istého prvku nastavená nascrollaleboautoa máme do činenia s klasickým posuvným pruhom - aj keď box nepreteká. Naopak, nebude to mať žiadny vplyv na posúvač prekrytia.always: Funguje to rovnako,stableale zaisťuje sa, že miesto pre odkvap žľabu je vždy vyhradené bez ohľadu na to, či je lišta klasická alebo prekrytá a bez ohľadu na to, či obsah preteká alebo nie.both: Toto uvádza, že pri zobrazení predvoleného žľabu bude na oboch stranách prvku umiestnený žľab s posúvačom. Uvidíte, ako by to mohlo prísť vhod, ak váš návrh vyžaduje rovnaké rozstupy na oboch stranách prvku.force: To je rovnaké ako použitie akostableaalwayskde prvok jeoverflownastavená na hodnotuauto,scroll,visible,hiddenaleboclip.
Pracovný koncept špecifikácie má veľmi praktickú tabuľku, ktorá rozdeľuje tieto definície do ich kontextov a ukazuje tak ich vzťah ku klasickým a prekrývajúcim posuvníkom.
| Klasické posuvníky | Prekryvné posuvníky | ||||
|---|---|---|---|---|---|
| prepad | posuvný žliabok | Preplnený | Nepreplnený | Preplnený | Nepreplnený |
| zvitok | auto | G | G | ||
| stabilný | GM | G | |||
| vždy | G | G | G | G | |
| auto | G | ||||
| stabilný | G | G | |||
| vždy | G | G | G | G | |
| viditeľné, skryté, klip | auto | ||||
| stabilný | f? | f? | |||
| vždy | f? | f? | f? | f? | |
„G“ predstavuje prípady, keď je miesto vyhradené pre odkvap žľabu, „f?“ prípady, keď je miesto určené pre odkvap posuvného pruhu, ak bola zadaná sila, a prázdne bunky, kde nie je vyhradené žiadne miesto.
Stav špecifikácie
scrollbar-gutterVlastnosť je definovaná v úrovňou prepadu module 4, ktorý je v pracovnom návrhu štatútu. To znamená, že stále prebieha práca a mohla by sa zmeniť odteraz až do času, keď sa návrh presunie k odporúčaniu kandidátov.
špecifikácia úrovne 3 modulu Overflow je tiež pracovným návrhom, takže je to dobrý indikátor toho, že (1) bude chvíľu trvať, kým scrollbar-guttersa stane odporúčaním, a (2) stále veľmi prebieha.
Podpora prehľadávača
V čase poslednej aktualizácie nie je podporovaná žiadna prehliadač.
Viac informácií
- Pracovný návrh úrovne 4 modulu pretečenia CSS
- GitHub vydanie # 92
- Pracovná skupina pre CSS v TPAC: Čo je nové v CSS? Vrátane ručne nakresleného návrhu tabuľky, v ktorej je načrtnuté správanie sa hodnôt vlastností.