Gepubliceerd: 4 september 2026
De functie "scrollcontainers voor één as" breidt de CSS-eigenschap overflow uit om scrollbare waarden ( auto , scroll , hidden ) te ondersteunen in combinatie met clip (bijvoorbeeld overflow: scroll clip ), wat resulteert in scrollcontainers voor slechts één as.
Hoewel deze wijziging veelgevraagde functies zoals positionering per as mogelijk maakt, introduceert ze ook extra neveneffecten op andere scrollafhankelijke functies. Vanwege deze potentiële compatibiliteitsrisico's vragen we ontwikkelaars om hun websites te testen en feedback te geven voordat deze functie wordt uitgerold naar de stabiele kanalen.
De functie is beschikbaar voor ontwikkelaarstests in Chrome 153 op de bèta-, ontwikkelaars- en canary- releasekanalen . Je hoeft geen vlag in te schakelen.
De eigenaardigheid bij het instellen van overloop op één as.
Zonder deze functie was het onmogelijk om met CSS een echt eendimensionale scrollcontainer te maken. Als je één as configureert om te scrollen terwijl je de andere as zichtbaar probeert te houden (bijvoorbeeld door overflow-x: scroll in te stellen en overflow-y: visible te laten), dwingt de stijlengine van de browser de zichtbare as automatisch om de waarde ` auto (of ` scroll ) te berekenen. Hierdoor ontstaat een tweedimensionale scroller, terwijl je dat niet wilde.
Deze eigenaardigheid wordt heel duidelijk wanneer je een tabel probeert te maken met een vastgeplakte bovenste rij en een vastgeplakte eerste kolom. In het volgende voorbeeld is het de bedoeling dat de eerste kolom vastplakt aan de .table-wrapper die horizontaal scrollt, en dat de bovenste rij vastplakt aan de scrollbalk van het document.
<div class="table-wrapper" style="overflow-x: auto;">
<table>
…
</table>
</div>
/* Scroll horizontally */
.table-wrapper {
overflow-x: auto;
}
/* Sticky top row */
.table-wrapper thead {
position: sticky;
top: 0;
}
/* Sticky first column */
.table-wrapper td:first-child {
position: sticky;
left: 0;
}
Als je het uitprobeert, zul je merken dat het niet werkt. Dit komt door het eerder beschreven overloopprobleem: de .table-wrapper wordt in feite een tweedimensionale scrollbalk. Dus wanneer position: sticky de dichtstbijzijnde voorouder-scrollbalk voor elke as opzoekt, is het resultaat in beide gevallen het .table-wrapper -element.
Live demonstratie
Demo-opname
Containers voor scrollen langs één as verhelpen dit probleem.
Bij scrollcontainers met één as kun je expliciet voorkomen dat die secundaire as een scroller wordt door clip te gebruiken. Op die manier kan position: sticky twee verschillende scrollcontainers onafhankelijk van elkaar volgen.
Om het tabelvoorbeeld te corrigeren, combineer je het horizontale scrollen met overflow-y: clip .
.table-wrapper {
overflow-x: auto;
overflow-y: clip;
}
Of, met behulp van de overflow :
.table-wrapper {
overflow: auto clip;
}
Hierdoor fungeert de .table-wrapper alleen nog als scrollcontainer voor de x-as. De bovenste rij zal deze nu omzeilen en correct aan de scrollbalk van het document op de y-as blijven plakken, terwijl de eerste kolom horizontaal aan de .table-wrapper blijft plakken.
Als je dit bericht bekijkt in een browser die dit ondersteunt, kun je het in actie zien in de volgende demo :
Live demonstratie
Demo-opname
Beïnvloed gedrag
Omdat scrollcontainers met één as de manier veranderen waarop scrollcontexten worden geëvalueerd en gecreëerd, kunt u veranderingen opmerken in andere functies die afhankelijk zijn van scrollcontainers, zoals:
-
position: sticky: Zoals getoond, blijven elementen nu correct vastzitten binnen scrollcontainers met één as, waardoor het gedrag verbetert voor elementen die beperkt worden dooroverflow: clipop één as. -
overscroll-behavior: Omdat een element nu slechts op één as een scrollcontainer kan zijn, wordtoverscroll-behaviormogelijk niet langer geactiveerd op de afgesneden as, wat van invloed kan zijn op aangepaste pull-to-refresh- of bounce-effecten. Deze gedragsverandering komt overeen met die in Firefox en Safari. - Programmatisch scrollen : Het aanroepen van scroll-API's (zoals
Element.scrollTo()) op een scrollcontainer met één as dwingt nu programmatische scrollbeperkingen af. Het element weigert programmatisch te scrollen langs de as die is gedefinieerd als clip. - Minimale celgrootte in Grid en Flex : Voor scrollcontainers in een grid- en flex-layout wordt de standaard minimale grootte (
min-width: auto) normaal gesproken genegeerd, zodat de cellen zich kunnen aanpassen aan de beschikbare ruimte. Wanneeroverflow: clipis ingesteld op dezelfde as, begint de standaard minimale grootte wel effect te hebben, waardoor de flex- of gridcontainer mogelijk groter wordt.
Kenmerkdetectie
Om te detecteren of scrollcontainers met één as worden ondersteund, kunt u de regel ` @supports named-feature() raadplegen met het trefwoord ` single-axis-scroll-container .
@supports named-feature(single-axis-scroll-container) {
/* Feature is supported */
}
Zoals besproken in CSSWG issue #13677 , is het gebruik van named-feature(single-axis-scroll-container) de aanbevolen standaardmethode om deze functionaliteit te detecteren, aangezien controleren met alleen @supports (overflow: scroll clip) slechts een parse-controle is, die niet detecteert of de browser het aangepaste scrollgedrag langs één as correct afhandelt.
Gebruik in JavaScript CSS.supports("named-feature(single-axis-scroll-container)") om deze controle uit te voeren.
Feedback gewenst
Om de potentiële compatibiliteitsrisico's te beoordelen, zijn tests uitgevoerd op 190 websites . Op basis van deze analyse lijken de wijzigingen geen significante problemen te veroorzaken.
Omdat scrollcontainers met één as de manier waarop scrollcontexten worden geëvalueerd fundamenteel veranderen, wordt een bredere aanpak gehanteerd. U wordt gevraagd websites en webapplicaties te testen op de niet-stabiele Chrome-kanalen om eventuele uitzonderlijke gevallen te identificeren voordat deze functie in de stabiele versie wordt uitgerold.
Als er problemen optreden of als je onverwacht scrollgedrag tegenkomt, meld dit dan bij Chromium .