De scrollbar-guttereigenschap biedt flexibiliteit om te bepalen hoe de ruimte die de browser gebruikt om een schuifbalk weer te geven die samenwerkt met de inhoud op het scherm. De specificatie beschrijft het "ruimte reserveren voor de schuifbalk" en dat is logisch, want dat is wat een goot uiteindelijk is: een container die ruimte reserveert voor alles wat erin staat en deze scheidt van andere elementen.
We zitten dus allemaal op dezelfde pagina, een schuifbalk is dat ding meestal aan de rechterkant van de browser (formeel aangeduid als de 'user-agent' - of UA - in de specificatie) dat uw schuifpositie aangeeft ten opzichte van het totaal beschikbare ruimte op de webpagina.
Dat zijn van oudsher een visuele container met een glijdende indicator. Dit worden klassieke schuifbalken genoemd . De indicator zit in de goot en de goot neemt fysiek onroerend goed op het scherm in beslag wanneer deze wordt weergegeven.
De laatste tijd zijn de verschijningen van de schuifbalk echter in de richting van iets veel minimalers gegaan. We noemen die overlay-schuifbalken en ze zijn gedeeltelijk of volledig transparant terwijl ze bovenop de pagina-inhoud zitten. Met andere woorden, in tegenstelling tot klassieke schuifbalken die fysiek onroerend goed op het scherm innemen, zitten overlay-schuifbalken bovenop de scherminhoud.
Terwijl we bezig zijn, kunnen op andere plaatsen schuifbalken verschijnen. Behalve vlak aan de rechterkant van de browser, zien we schuifbalken op HTML-elementen waar de inhoud het element overschrijdt en de overfloweigenschap (of overflow-xen overflow-y) op de scrollwaarde is ingesteld . En merk op dat het bestaan van overflow-xmiddelen is dat we horizontaal scrollen naast verticaal scrollen.
Daar hebben we het over. Niet de indicator zelf, maar de container die hem vasthoudt. Dat is de goot. Of een browser een klassieke of overlay-schuifbalk gebruikt, is geheel aan de UA zelf. Dat is niet aan ons om te beslissen. Dat geldt voor de breedte van de schuifbalk. De user-agent definieert dat en geeft ons er geen controle over.
Dat is waar het om scrollbar-guttergaat. We kunnen aangeven of de goot aanwezig is in zijn klassieke en overlay-varianten.
Syntaxis
.my-element ( scrollbar-gutter: ( auto | ( stable | always ) && both? && force? ) )Een dubbel en-teken (&&) scheidt twee of meer componenten, die allemaal in willekeurige volgorde moeten voorkomen.
Een vraagteken (?) Geeft aan dat het voorgaande type, woord of groep optioneel is (komt nul of één keer voor).
Waarden
auto(beginwaarde): Vrijwel het standaardgedrag dat tot nu toe is beschreven. Door de eigenschap op deze waarde in te stellen, kunnen klassieke schuifbalken onroerend goed in de gebruikersinterface gebruiken voor elementen waarvan deoverfloweigenschap van die elementen is ingesteld opscrollofauto. Omgekeerd nemen overlay-schuifbalken helemaal geen ruimte in als ze bovenop het element zitten.stable: Dit voegt een beetje eigenwijs gedrag toe door altijd ruimte te reserveren voor de schuifbalkmarge, zolang deoverfloweigenschap op hetzelfde element is ingesteld opscrollofautoen we te maken hebben met een klassieke schuifbalk - zelfs als de box niet overloopt. Omgekeerd heeft dit geen invloed op een overlay-schuifbalk.always: Dit werkt hetzelfde als,stablemaar zorgt ervoor dat er altijd ruimte voor de schuifbalkmarge is gereserveerd, ongeacht of de schuifbalk klassiek is of overlay en ongeacht of de inhoud overloopt of niet.both: Dit geeft aan dat een schuifbalkgoot aan beide zijden van het element wordt geplaatst wanneer de standaardgoot wordt weergegeven. U kunt zien hoe dit van pas kan komen als uw ontwerp gelijke afstanden aan beide zijden van het element vereist.forceDit is hetzelfde als het toepassen van zowelstableenalwayswaarbij het elementoverflowis ingesteld opauto,scroll,visible,hiddenofclip.
De Working Draft van de specificatie heeft een superhandige tabel die deze definities opsplitst in hun contexten om de relatie te tonen die ze hebben met klassieke en overlappende schuifbalken.
| Klassieke schuifbalken | Overlay schuifbalken | ||||
|---|---|---|---|---|---|
| overloop | scrollbar-goot | Overlopen | Niet overlopend | Overlopen | Niet overlopend |
| rol | auto | G | G | ||
| stal | GM | G | |||
| altijd | G | G | G | G | |
| auto | G | ||||
| stal | G | G | |||
| altijd | G | G | G | G | |
| zichtbaar, verborgen, clip | auto | ||||
| stal | f? | f? | |||
| altijd | f? | f? | f? | f? | |
'G' staat voor gevallen waarin ruimte is gereserveerd voor de schuifbalkmarge, 'f?' gevallen waarin ruimte is gereserveerd voor de schuifbalkgoot als kracht is opgegeven, en lege cellen gevallen waarin geen ruimte is gereserveerd.
Specificatie Status
De scrollbar-guttereigenschap is gedefinieerd in Overstroommodule niveau 4, die de status Werkend concept heeft. Dat betekent dat dit nog steeds een werk in uitvoering is en kan veranderen tussen nu en het moment dat het concept wordt verplaatst naar Kandidaataanbeveling.
de Overflow Module Level 3-specificatie is ook een Working Draft, dus dat is een goede indicatie dat (1) het enige tijd zal duren scrollbar-guttervoordat het een aanbeveling wordt en (2) het nog volop in ontwikkeling is.
Browser-ondersteuning
Ten tijde van de laatste update is er geen browserondersteuning.
Meer informatie
- CSS Overflow Module Level 4 Working Draft
- GitHub-probleem # 92
- De CSS-werkgroep bij TPAC: wat is er nieuw in CSS? Inclusief een handgetekend voorstel voor de tabel waarin het gedrag van de eigenschapswaarden wordt geschetst.