Bereit für Entwicklertests: Scrollcontainer mit einer Achse

Bramus
Free Debreuil
Free Debreuil
LinkedIn

Veröffentlicht am 4. September 2026

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

Diese Änderung ermöglicht zwar die Verwendung von häufig gewünschten Funktionen wie der fixierten Positionierung pro Achse, 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 Versionen eingeführt wird.

Die Funktion ist in Chrome 153 auf den Release-Kanälen Beta, Dev und Canary für Entwicklertests verfügbar. Sie müssen kein Flag aktivieren.

Der Fehler beim Festlegen von „overflow“ auf einer Achse

Ohne diese Funktion war es nicht möglich, mit CSS einen Scroll-Container mit einer Achse zu erstellen. Wenn Sie eine Achse so konfigurieren, dass sie scrollt, während die andere Achse sichtbar bleibt (z. B. overflow-x: scroll festlegen und overflow-y: visible beibehalten), erzwingt die Style-Engine des Browsers automatisch, dass die sichtbare Achse auf auto (oder scroll) festgelegt wird. Dadurch entsteht ein zweidimensionaler Scroller, obwohl Sie das nicht beabsichtigt haben.

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

<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 Fehler mit „overflow“: Der .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 Element .table-wrapper.

Live-Demo

Demoaufzeichnung

Scroll-Container mit einer Achse beheben den Fehler

Mit Scroll-Containern mit einer Achse können Sie mit clip explizit verhindern, dass die sekundäre Achse zu einem Scroller wird. So kann position: sticky zwei verschiedene Scroll-Container unabhängig voneinander verfolgen.

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

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

Oder verwenden Sie die Kurzform overflow:

.table-wrapper {
  overflow: auto clip;
}

Dadurch fungiert der .table-wrapper nur als Scroll-Container für die X-Achse. Die fixierte obere Zeile umgeht ihn jetzt und wird korrekt an den Scroller des Dokuments auf der Y-Achse angeheftet, während die erste Spalte weiterhin horizontal an den .table-wrapper angeheftet bleibt.

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

Live-Demo

Demoaufzeichnung

Betroffene Verhaltensweisen

Da Scroll-Container mit einer Achse die Art und Weise ändern, wie Scroll-Kontexte ausgewertet und erstellt werden, können Sie Änderungen bei anderen Funktionen feststellen, die auf Scroll-Containern basieren, z. B.:

  • position: sticky: Wie gezeigt, werden Elemente jetzt korrekt in Scroll-Containern mit einer Achse angeheftet. Dadurch wird das Verhalten von Elementen verbessert, die durch overflow: clip auf einer Achse eingeschränkt sind.
  • overscroll-behavior: Da ein Element jetzt nur auf einer Achse ein Scroll-Container 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. Diese Verhaltensänderung entspricht Firefox und Safari.
  • Programmatisches Scrollen: Wenn Sie Scroll-APIs (z. B. Element.scrollTo()) in einem Scroll-Container mit einer Achse aufrufen, werden jetzt programmatische Scroll-Einschränkungen erzwungen. Das Element kann nicht programmatisch entlang der als „clip“ definierten Achse gescrollt werden.
  • Minimale Zellengröße für Grid und Flex: Bei Scroll-Containern im Grid- und Flex-Layout wird die standardmäßige Mindestgröße (min-width: auto) normalerweise ignoriert, damit die Zellen an den verfügbaren Platz angepasst werden können. Wenn overflow: clip auf derselben Achse festgelegt ist, wirkt sich die standardmäßige Mindestgröße aus. Dadurch kann der Flex- oder Grid-Container größer werden.

Funktionserkennung

Wenn Sie die Unterstützung für Scroll-Container mit einer Achse erkennen möchten, fragen Sie die @supports named-feature() Regel mit dem single-axis-scroll-container Keyword ab.

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

Wie im CSSWG-Problem #13677 erläutert, ist die Verwendung von named-feature(single-axis-scroll-container) die empfohlene Standardmethode, um diese Funktion zu erkennen. Die Prüfung mit @supports (overflow: scroll clip) allein ist nur eine Analyseprüfung, bei der nicht erkannt wird, ob der Browser die überarbeiteten Verhaltensweisen für das Scrollen mit einer Achse korrekt verarbeitet.

Verwenden Sie in JavaScript 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. Basierend auf dieser Analyse scheinen die Änderungen keine signifikanten Fehler zu verursachen.

Da Scroll-Container mit einer Achse jedoch grundlegend ändern, wie Scroll-Kontexte ausgewertet werden, wird ein breiteres Spektrum abgedeckt. Sie werden gebeten, Websites und Webanwendungen auf den nicht stabilen Chrome-Kanälen zu testen, um Grenzfälle zu erkennen, bevor diese Funktion in stabilen Versionen eingeführt wird.

Wenn etwas nicht mehr funktioniert oder Sie unerwartetes Scroll-Verhalten feststellen, erstellen Sie bitte einen Eintrag für das Problem in Chromium.