CSS overflow-anchor Eigenschaft

Die CSS-Eigenschaft overflow-anchor steuert, ob das Scroll-Anchoring des Browsers auf ein Element angewendet wird. Scroll-Anchoring hält die Leseposition stabil, wenn sich Inhalte oberhalb des viewport in ihrer Größe verändern, damit die Seite nicht ungewollt nach unten springt. Mit der Eigenschaft overflow-anchor können Sie dieses Verhalten deaktivieren, wenn es stört.

Diese Seite erklärt, was Scroll-Anchoring löst, die beiden Werte von overflow-anchor, wann man es deaktiviert, und welche Browser-Unterstützung verfügbar ist.

Was Scroll-Anchoring löst

Stellen Sie sich vor, Sie lesen einen Artikel, und eine Anzeige, ein Bild oder ein verzögert geladener Kommentar lädt plötzlich oberhalb Ihrer aktuellen Scroll-Position. Ohne Scroll-Anchoring schiebt der neu eingefügte Inhalt alles nach unten, und der Text, den Sie gerade lasen, springt davon. Das ist eines der störendsten Erlebnisse im Web.

Scroll-Anchoring behebt dies, indem es ein DOM-Element nahe dem oberen Rand des viewport als Anker wählt und den Scroll-Offset nach einer Layout-Änderung anpasst, damit das Ankerelement visuell an seiner Position bleibt. Sie lesen dieselbe Zeile weiter; der eingefügte Inhalt erscheint lautlos darüber. Moderne Browser aktivieren dies standardmäßig — meist bemerken Sie es nicht, weil es einfach funktioniert.

overflow-anchor ist Ihr Ausweichweg. Es schaltet Scroll-Anchoring nicht ein (es ist bereits eingeschaltet); es ermöglicht Ihnen nur, es auszuschalten für einen Teilbaum, in dem die automatische Anpassung Probleme verursacht.

Eigenschaftswerte

overflow-anchor akzeptiert zwei echte Werte sowie die CSS-weiten Schlüsselwörter:

Beachten Sie, dass overflow-anchor standardmäßig nicht vererbt wird, aber das Setzen auf none bei einem Vorfahren unterdrückt das Anchoring effektiv für den gesamten Teilbaum.

Syntax

overflow-anchor: auto | none | initial | inherit;

Um Scroll-Anchoring für ein gesamtes Dokument zu deaktivieren, wenden Sie none auf das Wurzelelement an:

body {
  overflow-anchor: none;
}

Häufiger begrenzen Sie es auf den Container, der sich falsch verhält:

.live-feed {
  overflow-anchor: none;
}

Wann Anchoring deaktiviert werden sollte

In den meisten Fällen sollten Sie Anchoring aktiviert lassen — es zu deaktivieren bringt das Inhalt-Sprung-Problem zurück, das es verhindern soll. Greifen Sie auf overflow-anchor: none nur in bestimmten Fällen zurück:

• Endlos-Scroll, der Elemente voranstellt. Ein Chat-Fenster oder ein Feed mit "ältere Nachrichten laden", der Inhalte oben einfügt, gerät manchmal in Konflikt mit dem Anchoring. Wenn Sie die Scroll-Position manuell per JavaScript verwalten, kann die automatische Anpassung des Anchorings doppelt korrigieren und ein Stottern verursachen.
• Benutzerdefinierte Scroll-Tracking-Animationen. Wenn Sie scrollTop in jedem Frame auslesen, um einen Parallax- oder Fortschrittseffekt zu steuern, kann eine Anchoring-Anpassung einen unerwarteten Versatz einführen.
• Sticky "am Ende bleiben"-Logs. Ein terminalähnliches Log, das stets die neueste Zeile unten anzeigen soll, lässt sich ohne Anchoring-Eingriffe leichter verwalten.

Testen Sie in jedem dieser Fälle zuerst mit aktiviertem Anchoring — möglicherweise müssen Sie es gar nicht deaktivieren.

Per JavaScript setzen

Sie können das Anchoring zur Laufzeit über das DOM umschalten:

// Disable scroll anchoring on the feed container
const feed = document.querySelector(".live-feed");
feed.style.overflowAnchor = "none";

// Re-enable it later
feed.style.overflowAnchor = "auto";

Browser-Unterstützung und graceful Degradation

overflow-anchor (und Scroll-Anchoring selbst) wird in Chrome, Edge, Firefox und anderen Chromium-basierten Browsern unterstützt. Safari hat Scroll-Anchoring historisch nicht implementiert, sodass die Eigenschaft dort keine Wirkung hat — Seiten verhalten sich dort einfach so, als wäre Anchoring deaktiviert.

Da die Eigenschaft immer nur ein optionales Komfort-Verhalten entfernt, gibt es nichts zu polyfüllen und keinen Fallback zu schreiben: In nicht unterstützten Browsern ist overflow-anchor: none harmlos und wird ignoriert.

Verwandte Eigenschaften

• overflow — die Kurzschreibweise, die festlegt, ob überlaufender Inhalt abgeschnitten, gescrollt oder sichtbar ist.
• overflow-x und overflow-y — steuern den Überlauf auf jeder Achse unabhängig.
• scroll-behavior — lässt das Scrollen (z. B. zu Ankern) sanft animieren statt zu springen.
• position — kombiniert sticky/fixed Layouts, die oft neben scrollbaren Bereichen existieren.

Übungen