Tato scrollbar-guttervlastnost poskytuje flexibilitu k určení, jak místo, které prohlížeč používá k zobrazení posuvníku, který interaguje s obsahem na obrazovce. Specifikace to popisuje jako „vyhrazení místa pro posuvník“ a to dává smysl, protože to je nakonec žlab: kontejner, který rezervuje místo pro cokoli, co je v něm, a odděluje ho od ostatních prvků.
Takže jsme všichni na stejné stránce, posuvník je ta věc obvykle na pravé straně prohlížeče (formálně označovaná jako „uživatelský agent“ - nebo UA - ve specifikaci), která označuje vaši pozici posouvání vzhledem k celkovému dostupné místo na webové stránce.
Tradičně se jednalo o vizuální kontejner s posuvným indikátorem. Ty se označují jako klasické posuvníky . Indikátor je umístěn uvnitř okapu a okap při zobrazení zabírá fyzický majetek na obrazovce.
V poslední době však vzhled posuvníku směřoval k něčemu mnohem minimálnějšímu. Říkáme těmto překryvným posuvníkům a jsou buď částečně, nebo zcela průhledné, když sedí nahoře na obsahu stránky. Jinými slovy, na rozdíl od klasických posuvníků, které na obrazovce zabírají fyzický majetek, jsou překryvné posuvníky umístěny v horní části obsahu obrazovky.
Když už jsme u toho, na jiných místech se mohou objevit posuvníky. Kromě toho, že sedíme zarovnané vpravo od prohlížeče, uvidíme na prvcích HTML posuvníky, kde obsah přetéká prvkem a overflowvlastnost (nebo overflow-xa overflow-y) je nastavena na scrollhodnotu. A všimněte si, že existence overflow-xprostředků má kromě svislého posouvání i vodorovné posouvání.
O tom mluvíme. Ne samotný indikátor, ale kontejner, který jej drží. To je okap. Zda prohlížeč používá klasický nebo překryvný posuvník, je zcela na samotném UA. To není na nás, abychom se rozhodli. To platí pro šířku posuvného pruhu. Uživatelský agent to definuje a nedává nám nad ním žádnou kontrolu.
To je místo, kde scrollbar-gutterpřichází. Můžeme vysvětlit, zda je příkop přítomen v jeho klasických a překrývajících se variantách.
Syntax
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Dvojitý ampersand (&&) odděluje dvě nebo více komponent, z nichž všechny se musí vyskytovat, v libovolném pořadí.
Otazník (?) Označuje, že předchozí typ, slovo nebo skupina je volitelná (vyskytuje se nula nebo jednou).
Hodnoty
auto(počáteční hodnota): Doposud popsané výchozí chování. Nastavení vlastnosti na tuto hodnotu umožňuje klasickým posuvníkům konzumovat nemovitosti v uživatelském rozhraní na prvcích, kde jeoverflowvlastnost těchto prvků nastavena nascrollneboauto. Naopak překryvné posuvníky nezabírají žádné místo tím, že sedí na vrcholu prvku.stable: To přidává trochu umíněného chování tím, že se vždy rezervuje prostor pro žlab posuvného pruhu, pokud jeoverflowvlastnost stejného prvku nastavena nascrollneboautoa máme co do činění s klasickým posuvným pruhem - i když rámeček nepřeplňuje. Naopak to nebude mít žádný vliv na překryvný posuvník.always: To funguje stejně jako,stableale zajišťuje, že místo pro žlab posuvného pruhu je vždy vyhrazeno, bez ohledu na to, zda je posuvný pruh klasický nebo překryvný a bez ohledu na to, zda obsah přetéká nebo ne.both: Toto uvádí, že při zobrazení výchozího okapu bude na obou stranách prvku umístěn žlab posuvníku. Můžete vidět, jak by to mohlo přijít vhod, pokud váš návrh vyžaduje stejné mezery na obou stranách prvku.force: To je stejné jako použití jakstableaalwayskde prvek jeoverflownastavena na hodnotuauto,scroll,visible,hiddenneboclip.
Pracovní koncept specifikace má velmi praktickou tabulku, která rozděluje tyto definice do jejich kontextů, aby ukázala vztah, který mají ke klasickým a překrývajícím se posuvníkům.
| Klasické posuvníky | Překryvné posuvníky | ||||
|---|---|---|---|---|---|
| přetékat | rolovací lišta | Přetékající | Není přetékající | Přetékající | Není přetékající |
| svitek | auto | G | G | ||
| stabilní | GM | G | |||
| vždy | G | G | G | G | |
| auto | G | ||||
| stabilní | G | G | |||
| vždy | G | G | G | G | |
| viditelný, skrytý, klip | auto | ||||
| stabilní | F? | F? | |||
| vždy | F? | F? | F? | F? | |
„G“ představuje případy, kdy je místo vyhrazeno pro žlab posuvného pruhu, „f?“ případy, kdy je vyhrazen prostor pro žlab posuvného pruhu, pokud byla zadána síla, a prázdné buňky případy, kdy není vyhrazen žádný prostor.
Stav specifikace
scrollbar-gutterVlastnost je definována v úrovní přepadu modulu 4, který je v pracovním návrhu statutu. To znamená, že se stále jedná o nedokončenou práci, která by se mohla změnit od nynějška do okamžiku, kdy se návrh přesune na doporučení kandidáta.
specifikace Overflow Module Level 3 je také Working Draft, takže je to dobrý indikátor toho, že (1) bude nějakou dobu trvat, než scrollbar-gutterse stane doporučením, a (2) stále velmi probíhá.
Podpora prohlížeče
V době poslední aktualizace neexistuje podpora prohlížeče.
Více informací
- Pracovní koncept CSS Overflow Module úrovně 4
- Vydání GitHub # 92
- Pracovní skupina CSS v TPAC: Co je nového v CSS? Včetně ručně nakresleného návrhu tabulky popisujícího chování hodnot vlastností.