scrollbar-gutterProprietatea oferă flexibilitate pentru a determina modul în care spațiul browser - ul folosește pentru a afișa o bară de derulare care interacționează cu conținutul de pe ecran. Specificația îl descrie „rezervând spațiu pentru bara de defilare” și asta are sens, întrucât asta este în cele din urmă un jgheab: un container care rezervă spațiu pentru orice este în el și îl separă de alte elemente.
Deci, suntem cu toții pe aceeași pagină, o bară de derulare este acel lucru de obicei în partea dreaptă a browserului (denumit în mod oficial „agent de utilizator” - sau UA - în specificație) care indică poziția dvs. de derulare în raport cu totalul spațiul disponibil pe pagina web.
Acestea au fost în mod tradițional un container vizual cu un indicator de alunecare. Acestea sunt denumite bare de defilare clasice . Indicatorul se află în interiorul jgheabului, iar jgheabul ocupă bunuri imobile fizice pe ecran atunci când este afișat.
În ultimul timp, însă, aparițiile barei de derulare s-au orientat către ceva mult mai minim. Le numim acele bare de defilare suprapuse și sunt fie parțial, fie complet transparente în timp ce se află pe partea de sus a conținutului paginii. Cu alte cuvinte, spre deosebire de barele de defilare clasice care ocupă proprietăți imobiliare fizice pe ecran, barele de defilare suprapuse stau deasupra conținutului ecranului.
În timp ce suntem la el, pot apărea bare de defilare în alte locuri. În afară de stânga la dreapta browserului, vom vedea bare de derulare pe elemente HTML în care conținutul deversează elementul și overflowproprietatea (sau overflow-xși overflow-y) sunt setate la scrollvaloare. Și rețineți că existența overflow-xmijloacelor de derulare pe orizontală este în plus față de derularea verticală.
Despre asta vorbim. Nu indicatorul în sine, ci containerul care îl ține. Asta este jgheabul. Dacă un browser folosește o bară de defilare clasică sau suprapusă, depinde în totalitate de UA. Nu trebuie să decidem noi. Acest lucru este valabil și pentru lățimea barei de derulare. Agentul utilizator definește acest lucru și nu ne oferă niciun control asupra acestuia.
Aici scrollbar-gutterintervine. Putem preciza dacă jgheabul este prezent în variantele sale clasice și suprapuse.
Sintaxă
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Un dublu ampersand (&&) separă două sau mai multe componente, toate acestea trebuie să apară, în orice ordine.
Un semn de întrebare (?) Indică faptul că tipul, cuvântul sau grupul precedent este opțional (apare zero sau de o dată).
Valori
auto(valoare inițială): destul de mult comportamentul implicit descris până acum. Setarea proprietății la această valoare permite ca barele de derulare clasice să consume proprietăți imobiliare în interfața de utilizare pentru elementele în careoverflowproprietatea acelor elemente este setată lascrollsauauto. În schimb, barele de defilare suprapuse nu ocupă deloc spațiu așezându-se deasupra elementului.stable: Aceasta adaugă un comportament puțin opinionat, rezervând întotdeauna spațiu pentru jgheabul barei de derulare, atâta timp câtoverflowproprietatea de pe același element este setată lascrollsauautoavem de-a face cu o bară de defilare clasică - chiar și atunci când caseta nu este debordantă. În schimb, acest lucru nu va avea niciun impact asupra unei bare de defilare suprapuse.always: Aceasta acționează la fel castabledar asigură că spațiul pentru jgheabul barei de derulare este întotdeauna rezervat, indiferent dacă bara de defilare este clasică sau suprapusă și indiferent dacă conținutul este debordant sau nu.both: Aceasta afirmă că un jgheab cu bara de derulare va fi plasat pe ambele părți ale elementului atunci când este afișat jgheabul implicit. Puteți vedea cum ar putea fi util acest lucru dacă proiectarea dvs. necesită o distanță egală pe ambele părți ale elementului.force: Acest lucru este la fel ca și aplicarea atâtstableși înalwayscazul în care elementul aniloroverfloweste setat laauto,scroll,visible,hiddensauclip.
Proiectul de lucru al specificației are un tabel foarte util care descompune acele definiții în contextele lor pentru a arăta relația pe care o au cu barele de defilare clasice și suprapuse.
| Barele de defilare clasice | Suprapuneți barele de derulare | ||||
|---|---|---|---|---|---|
| revărsare | scrollbar-gutter | Debordant | Nu debordează | Debordant | Nu debordează |
| sul | auto | G | G | ||
| grajd | GM | G | |||
| mereu | G | G | G | G | |
| auto | G | ||||
| grajd | G | G | |||
| mereu | G | G | G | G | |
| vizibil, ascuns, clip | auto | ||||
| grajd | f? | f? | |||
| mereu | f? | f? | f? | f? | |
„G” reprezintă cazurile în care spațiul este rezervat pentru jgheabul barei de derulare, „f?” cazuri în care spațiul este rezervat pentru jgheabul barei de derulare dacă a fost specificată forța și celulele goale cazuri în care nu este rezervat spațiu.
Starea specificațiilor
scrollbar-gutterProprietatea este definită în nivelul Overflow Modulul 4, care este în lucru Proiectul de stare. Asta înseamnă că aceasta este încă o lucrare în desfășurare și s-ar putea schimba de acum până în momentul în care proiectul trece la Recomandarea candidatului.
specificația Modulului de preaplin Nivelul 3 este, de asemenea, o schiță de lucru, deci este un bun indiciu că (1) va dura ceva timp pentru scrollbar-guttera deveni o recomandare și (2) este încă în curs de desfășurare.
Suport pentru browser
Nu există suport pentru browser în momentul ultimei actualizări.
Mai multe informatii
- Modul CSS Overflow Modul Nivel 4 Proiect de lucru
- Numărul GitHub nr. 92
- Grupul de lucru CSS la TPAC: Ce este nou în CSS? Inclusiv o propunere desenată manual pentru tabel care prezintă comportamentul valorilor proprietății.