scrollbar-gutterObjekt osigurava fleksibilnost kako bi se utvrdilo kako je prostor preglednik koristi za prikaz klizač koji djeluje zajedno sa sadržaja na zaslonu. Specifikacija ga opisuje kao "rezerviranje prostora za traku za pomicanje" i to ima smisla jer je to u konačnici oluk: spremnik koji rezervira prostor za sve što je u njemu i odvaja ga od ostalih elemenata.
Dakle, svi smo na istoj stranici, traka za pomicanje je ona stvar koja je obično na desnoj strani preglednika (u specifikaciji se službeno naziva "korisnički agent" - ili UA -) koji označava vaš položaj pomicanja u odnosu na ukupnu vrijednost dostupan prostor na web stranici.
To su tradicionalno bili vizualni spremnici s kliznim indikatorom. Oni se nazivaju klasičnim klizačima . Indikator se nalazi unutar žlijeba i oluk zauzima fizičku nekretninu na zaslonu kada se prikaže.
No, u posljednje vrijeme pojavljivanje traka s pomicanjem kreće se prema nečem mnogo minimalnijem. Te slojeve nazivamo klizačima i oni su djelomično ili potpuno prozirni dok sjede na vrhu sadržaja stranice. Drugim riječima, za razliku od klasičnih klizača koji zauzimaju fizičku nekretninu na zaslonu, prekriveni klizači nalaze se na vrhu sadržaja zaslona.
Dok smo kod toga, klizači se mogu pojaviti na drugim mjestima. Osim što ćemo sjesti udesno od preglednika, vidjet ćemo trake za pomicanje na HTML elementima gdje sadržaj prelazi element i overflowsvojstvo (ili overflow-xi overflow-y) je postavljeno na scrollvrijednost. Imajte na umu da postojanje sredstava overflow-xznači da imamo vodoravno pomicanje uz vertikalno pomicanje.
O tome i pričamo. Ne sam pokazatelj, već spremnik koji ga drži. To je oluk. Hoće li preglednik koristiti klasični klizač ili prekrivajući klizač, potpuno ovisi o samoj UA. To nije na nama da odlučimo. To vrijedi za širinu trake za pomicanje. Korisnički agent to definira i ne daje nam nikakvu kontrolu nad tim.
Tu scrollbar-gutterdolazi. Možemo odrediti je li oluk prisutan u svojim klasičnim varijantama i prekrivajućim varijantama.
Sintaksa
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Dvostruki znak & (&&) razdvaja dvije ili više komponenata, koje se sve moraju pojaviti, bilo kojim redoslijedom.
Znak pitanja (?) Označava da je prethodna vrsta, riječ ili grupa neobavezna (javlja se nula ili jedanput).
Vrijednosti
auto(početna vrijednost): Dobrim dijelom do sada opisano ponašanje. Postavljanje svojstva na ovu vrijednost omogućuje klasičnim klizačima da troše nekretnine u korisničkom sučelju na elementima gdje jeoverflowsvojstvo tih elemenata postavljeno nascrolliliauto. Suprotno tome, prekrivajuće klizače uopće ne zauzimaju prostor sjedeći na vrhu elementa.stable: To dodaje malo samopouzdanja, uvijek rezervirajući prostor za oluk klizača, sve dok jeoverflowsvojstvo na istom elementu postavljeno nascrolliliautoi imamo posla s klasičnim klizačem - čak i ako okvir nije prenatrpan. Suprotno tome, to neće imati utjecaja na kliznu traku sloja.always: Ovo djeluje isto kao istableosigurava da je prostor za oluk klizača uvijek rezerviran, bez obzira je li klizač klasičan ili prekriven i bez obzira na to je li sadržaj preplavljen ili ne.both: Ovo navodi da će se oluk za pomicanje postaviti na obje strane elementa kada se prikaže zadani žlijeb. Možete vidjeti kako bi ovo moglo dobro doći ako vaš dizajn zahtijeva jednak razmak s obje strane elementa.force: To je isto kao i primjenom obastableialwaysgdje element jeoverflowpostavljen naauto,scroll,visible,hiddeniliclip.
Radni nacrt specifikacije ima super praktičnu tablicu koja te definicije raščlanjuje na njihov kontekst kako bi pokazala odnos koji imaju s klasičnim i prekrivajućim klizačima.
| Klasični klizači | Prekrivajući klizači | ||||
|---|---|---|---|---|---|
| prelijevanje | klizač-oluk | Prelijevajući | Ne prelijevajući se | Prelijevajući | Ne prelijevajući se |
| svitak | auto | G | G | ||
| stabilan | GM | G | |||
| stalno | G | G | G | G | |
| auto | G | ||||
| stabilan | G | G | |||
| stalno | G | G | G | G | |
| vidljiv, skriven, isječak | auto | ||||
| stabilan | f? | f? | |||
| stalno | f? | f? | f? | f? | |
"G" predstavlja slučajeve u kojima je rezervirano mjesto za oluk klizača, "f?" slučajevi u kojima je rezerviran prostor za oluk klizača ako je navedena sila, i slučajevi praznih ćelija u kojima nije rezerviran prostor.
Status specifikacije
scrollbar-gutterNekretnina definiran u preljeva Modul 4, koji je u radnom Nacrtu status. To znači da je ovo još uvijek u tijeku i moglo bi se promijeniti od sada do trenutka kada nacrt pređe na Preporuku kandidata.
specifikacija modula Preljev razine 3 također je radni nacrt, pa je to dobar pokazatelj da će (1) trebati neko vrijeme scrollbar-gutterda postane preporuka i (2) da je još uvijek u tijeku.
Podrška preglednika
U vrijeme posljednjeg ažuriranja ne postoji podrška za preglednik.
Više informacija
- CSS preljevni modul razine 4 radni nacrt
- GitHub izdanje # 92
- CSS radna skupina u TPAC-u: Što je novo u CSS-u? Uključujući ručno nacrtani prijedlog za tablicu koji opisuje ponašanje vrijednosti svojstava.