Bereit für Entwicklertests: Scrollcontainer mit einer Achse

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Veröffentlicht am 4. September 2026

Die Funktion „Scroll-Container mit einer Achse“ erweitert die CSS-Property overflow, um scrollbare Werte (auto, scroll, hidden) in Kombination mit clip (z. B. overflow: scroll clip) zu unterstützen. So entstehen Scroll-Container für nur eine Achse.

Diese Änderung ermöglicht zwar sehr gefragte Funktionen wie die achsenweise Fixierung von Positionen, führt aber auch zu zusätzlichen Nebeneffekten bei anderen scrollabhängigen Funktionen. Aufgrund dieser potenziellen Kompatibilitätsrisiken bitten wir Entwickler, ihre Websites zu testen und Feedback zu geben, bevor diese Funktion in stabilen Channels eingeführt wird.

Die Funktion ist für Entwicklertests in Chrome 154 in den Release-Versionen Beta, Entwickler und Canary verfügbar. Sie müssen kein Flag aktivieren.

Besonderheit beim Festlegen von „overflow“ für eine Achse

Ohne diese Funktion war es unmöglich, mit CSS einen Scrollcontainer mit nur einer Achse zu erstellen. Wenn Sie eine Achse für das Scrollen konfigurieren und versuchen, die andere Achse sichtbar zu halten (z. B. durch Festlegen von overflow-x: scroll und Beibehalten von overflow-y: visible), erzwingt die Style-Engine des Browsers automatisch, dass die sichtbare Achse auf auto (oder scroll) berechnet wird. Dadurch wird ein zweidimensionaler Scroller erstellt, obwohl Sie das nicht beabsichtigt haben.

Dieser Fehler wird sehr deutlich, wenn Sie versuchen, eine Tabelle mit einer fixierten Kopfzeile und einer fixierten ersten Spalte zu erstellen. Im folgenden Beispiel soll die erste Spalte an der horizontal scrollenden .table-wrapper und die obere Zeile am Scroller des Dokuments fixiert werden.

<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;
}

Wenn Sie es ausprobieren, werden Sie feststellen, dass es nicht funktioniert. Das liegt an dem zuvor beschriebenen Overflow-Problem: Das .table-wrapper wird effektiv zu einem zweidimensionalen Scroller. Wenn position: sticky also für jede Achse nach dem nächsten übergeordneten Scroller sucht, ist das Ergebnis in beiden Fällen das .table-wrapper-Element.

Live-Demo

Demoaufzeichnung

Scroll-Container mit einer Achse beheben das Problem

Bei Containern mit Scrollen auf einer Achse können Sie mit clip explizit verhindern, dass die sekundäre Achse zum Scrollen verwendet wird. So kann position: sticky zwei verschiedene Scrollcontainer unabhängig voneinander erfassen.

Um das Tabellenbeispiel zu korrigieren, kombinieren Sie den horizontalen Scroll mit overflow-y: clip.

.table-wrapper {
  overflow-x: auto;
  overflow-y: clip;
}

Oder mit der Kurzform overflow:

.table-wrapper {
  overflow: auto clip;
}

Dadurch fungiert .table-wrapper nur als Scrollcontainer für die X-Achse. Die fixierte obere Zeile wird nun umgangen und bleibt korrekt am Scroller des Dokuments auf der Y-Achse fixiert, während die erste Spalte weiterhin horizontal an .table-wrapper fixiert bleibt.

Wenn Sie diesen Beitrag in einem Browser mit Unterstützung für die Funktion aufrufen, können Sie sie in der folgenden Demo in Aktion sehen:

Live-Demo

Demoaufzeichnung

Betroffene Verhaltensweisen

Da sich durch Scrollcontainer mit einer Achse ändert, wie Scrollkontexte ausgewertet und erstellt werden, können sich auch andere Funktionen ändern, die auf Scrollcontainern basieren, z. B.:

  • position: sticky: Wie gezeigt, bleiben Elemente jetzt korrekt in Scrollcontainern mit einer Achse. Das Verhalten von Elementen, die auf einer Achse durch overflow: clip eingeschränkt werden, wird dadurch verbessert.
  • overscroll-behavior: Da ein Element jetzt nur noch auf einer Achse ein Scrollcontainer sein kann, wird overscroll-behavior möglicherweise nicht mehr auf der abgeschnittenen Achse ausgelöst. Das kann sich auf benutzerdefinierte Pull-to-Refresh- oder Bounce-Effekte auswirken. Dieses Verhalten entspricht dem von Firefox und Safari.
  • Programmatisches Scrollen: Wenn Scroll-APIs (z. B. Element.scrollTo()) für einen Scroll-Container mit einer Achse aufgerufen werden, werden jetzt Einschränkungen für das programmatische Scrollen erzwungen. Das Element lässt sich nicht programmatisch entlang der als „clip“ definierten Achse scrollen.
  • Mindestgröße für Zellen in Grid- und Flex-Layouts: Bei Scrollcontainern in Grid- und Flex-Layouts wird die standardmäßige Mindestgröße (min-width: auto) normalerweise ignoriert, damit sich die Zellen an den verfügbaren Platz anpassen können. Wenn overflow: clip auf derselben Achse festgelegt ist, wirkt sich die Standardmindestgröße aus und der Flex- oder Grid-Container wird möglicherweise größer.

Funktionserkennung

Wenn Sie herausfinden möchten, ob einachsige Scrollcontainer unterstützt werden, fragen Sie die @supports named-feature()-Regel mit dem Keyword single-axis-scroll-container ab.

@supports named-feature(single-axis-scroll-container) {
  /* Feature is supported */
}

Wie im CSSWG-Problem #13677 beschrieben, ist die Verwendung von named-feature(single-axis-scroll-container) die empfohlene Standardmethode zum Erkennen dieser Funktion, da die Prüfung mit @supports (overflow: scroll clip) allein nur eine Analyseprüfung ist, bei der nicht erkannt wird, ob der Browser die überarbeiteten Scrollverhaltensweisen mit einer Achse korrekt verarbeitet.

In JavaScript verwenden Sie CSS.supports("named-feature(single-axis-scroll-container)"), um diese Prüfung durchzuführen.

Feedback erwünscht

Um die potenziellen Kompatibilitätsrisiken zu bewerten, wurden Tests auf 190 Websites durchgeführt. Auf Grundlage dieser Analyse scheinen die Änderungen keine wesentlichen Fehler zu verursachen.

Da einachsige Scroll-Container jedoch die Art und Weise, wie Scroll-Kontexte ausgewertet werden, grundlegend verändern, wird ein breiteres Netz ausgeworfen. Sie werden gebeten, Websites und Webanwendungen in den nicht stabilen Chrome-Channels zu testen, um Grenzfälle zu ermitteln, bevor diese Funktion in der stabilen Version eingeführt wird.

Wenn bei Ihnen Probleme auftreten oder Sie unerwartetes Scrollverhalten feststellen, melden Sie bitte einen Chromium-Fehler.