Überlauf

The CSS Podcast – 034: Overflow

Wenn Inhalte über den übergeordneten Container hinausgehen, gibt es viele Möglichkeiten, wie Sie damit umgehen können. Sie können scrollen, um zusätzlichen Platz hinzuzufügen, überlaufende Ränder abschneiden, die abgeschnittenen Stellen mit Auslassungspunkten kennzeichnen und vieles mehr. Überlauf ist besonders wichtig, wenn Sie Apps für Smartphones und mehrere Bildschirmgrößen entwickeln.

In CSS gibt es zwei verschiedene Beschneidungsoptionen: text-overflow hilft bei einzelnen Textzeilen und die overflow-Eigenschaften helfen, Überlauf im Box-Modell zu steuern.

Überlauf einer einzelnen Zeile mit text-overflow

Verwende die text-overflow-Property für alle Elemente, die Textknoten enthalten, z. B. einen Absatz(<p>). Gibt an, wie der Text angezeigt wird, wenn er nicht in den verfügbaren Platz des Elements passt. Der gesamte sichtbare HTML-Text auf einer Seite befindet sich in Textknoten. Für text-overflow benötigen Sie eine einzelne, nicht umgebrochene Textzeile. Daher müssen Sie overflow auf hidden festlegen und einen white-space-Wert haben, der das Umbrechen verhindert.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Überlauf-Attribute verwenden

Mit den Overflow-Eigenschaften wird festgelegt, was passiert, wenn die untergeordneten Elemente eines Elements mehr Platz benötigen, als verfügbar ist. Das kann beabsichtigt sein, wie bei einer interaktiven Karte wie Google Maps, bei der ein Nutzer ein großes Bild, das auf eine bestimmte Größe zugeschnitten ist, schwenkt. Das kann auch unbeabsichtigt passieren, z. B. in einer Chat-Anwendung, in der der Nutzer eine lange Nachricht eingibt, die nicht in die Textblase passt.

Der Overflow lässt sich in zwei Teile unterteilen. Das übergeordnete Element hat einen fest begrenzten Bereich, der sich nicht ändert. Sie können sich das wie ein Fenster vorstellen. Die untergeordneten Elemente sind Inhalte, die mehr Abstand zum übergeordneten Element benötigen. Das ist das, was Sie durch das Fenster sehen. Wenn du den Überlauf verwaltest, kannst du festlegen, wie der Inhalt im Fenster dargestellt wird.

Scrollen auf der vertikalen und horizontalen Achse

Mit der Eigenschaft overflow-y wird der physische Überlauf entlang der vertikalen Achse des Geräte-Viewports gesteuert, also das Scrollen nach oben und unten.

Mit der Eigenschaft overflow-x wird der Überlauf entlang der horizontalen Achse des Geräte-Viewports gesteuert, sodass nach links und rechts gescrollt werden kann.

Logische Eigenschaften für die Scrollrichtung

Mit den Attributen overflow-inline und overflow-block wird der Überlauf basierend auf der Dokumentrichtung und dem Schreibmodus festgelegt.

Die Kurzschreibweise overflow

Mit der Kurzschreibweise overflow werden die Stile overflow-x und overflow-y in einer Zeile festgelegt:

overflow: hidden scroll;

Wenn zwei Keywords angegeben sind, gilt das erste für overflow-x und das zweite für overflow-y. Andernfalls verwenden sowohl overflow-x als auch overflow-y denselben Wert.

Werte

Hier finden Sie eine Liste der Werte und Keywords, die für die overflow-Properties verfügbar sind.

overflow: visible (Standard)

Ohne Festlegung der Property ist overflow: visible der Standardwert für das Web. So wird sichergestellt, dass Inhalte niemals unbeabsichtigt ausgeblendet werden, und die Grundsätze „Inhalte niemals ausblenden“ oder „Sichere Layouts mit präzisen Layouts“ werden eingehalten.

overflow: hidden

Mit overflow: hidden wird der Inhalt in der angegebenen Richtung abgeschnitten und es werden keine Scrollleisten zum Anzeigen des Inhalts bereitgestellt.

overflow: scroll

Mit

overflow: scroll werden Scrollleisten aktiviert, damit Nutzer durch Inhalte scrollen können. Auch wenn Inhalte nicht überlaufen, sind Scrollleisten vorhanden. So lässt sich das Layout-Shifting in der Zukunft reduzieren, wenn ein Container beispielsweise aufgrund einer Größenänderung scrollbar wird. Außerdem können Sie den Nutzer so visuell auf scrollbare Bereiche vorbereiten.

overflow: clip

Wie bei overflow: hidden wird der Inhalt mit overflow: clip auf die Padding-Box des Elements zugeschnitten. Der Unterschied zwischen clip und hidden besteht darin, dass das Keyword clip auch das gesamte Scrollen, einschließlich des programmatischen Scrollens, verbietet.

overflow: auto

Schließlich der am häufigsten verwendete Wert: overflow: auto. So werden die Einstellungen des Nutzers berücksichtigt und bei Bedarf Scrollleisten angezeigt. Standardmäßig werden sie jedoch ausgeblendet. Die Verantwortung für das Scrollen liegt beim Nutzer und beim Browser.

Scrollen und Überlauf

Viele dieser overflow-Verhaltensweisen führen zu einer Scrollleiste. Es gibt jedoch einige spezifische Scrollverhaltensweisen und ‑attribute, mit denen Sie das Scrollen in Ihrem Overflow-Container steuern können.

Scrollen und Bedienungshilfen

Es ist wichtig, dass der scrollbare Bereich den Fokus annehmen kann, damit ein Tastaturnutzer mit der Tabulatortaste zum Feld wechseln und dann mit den Pfeiltasten scrollen kann.

Damit ein Scrollfeld den Fokus annehmen kann, fügen Sie tabindex="0", einen Namen mit dem Attribut aria-labelledby und ein geeignetes role-Attribut hinzu. Beispiel:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Mit CSS kann dann angegeben werden, dass das Feld den Fokus hat. Dazu wird die Eigenschaft outline verwendet, um einen visuellen Hinweis darauf zu geben, dass das Feld jetzt gescrollt werden kann.

Im Artikel Using CSS to Enforce Accessibility (CSS zur Durchsetzung der Barrierefreiheit verwenden) zeigt Adrian Roselli, wie CSS dazu beitragen kann, dass die Barrierefreiheit nicht beeinträchtigt wird. So wird beispielsweise das Scrollen nur aktiviert und der Fokusindikator nur hinzugefügt, wenn die richtigen Attribute verwendet werden. Die folgenden Regeln sorgen nur dann dafür, dass das Feld gescrollt werden kann, wenn es die Attribute tabindex, aria-labelledby und role hat.

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Positionierung der Scrollleiste im Boxmodell

Scrollbalken nehmen Platz im Padding-Feld ein und können um Platz konkurrieren, wenn inline und nicht overlaid verwendet wird. Im Box-Modell-Modul wird diese potenzielle Quelle für Layoutverschiebungen genauer beschrieben.

Root-Scroller im Vergleich zu Implicit-Scroller

Einige Scroller haben möglicherweise ein Pull-to-Refresh-Verhalten und andere spezielle Verhaltensweisen, insbesondere wenn Sie für mobile und hybride Anwendungen entwickeln. Dieses Scrollverhalten tritt im Root-Scroller auf. Auf einer Seite gibt es immer nur einen Root-Scroller. Standardmäßig ist documentElement der Root-Scroller der Seite. Wenn Sie jedoch ändern, welches Element der Root-Scroller ist, können die speziellen Verhaltensweisen auf andere Scroller als das documentElement angewendet werden. Wir bezeichnen diesen neuen Scroller als impliziten Root-Scroller.

Wenn Sie einen Root-Scroller erstellen möchten, können Sie die Scroller-Promotion verwenden. Dazu positionieren Sie einen Container als „fixed“, sodass er den gesamten Darstellungsbereich abdeckt und der Z-Index über dem Scroller liegt. Hier können Sie einen Root-Scroller mit einem verschachtelten impliziten Scroller vergleichen.

Bildlaufleiste gestalten

Sie können die Scrollleiste so gestalten, dass sie zum Design Ihrer Website passt. Mit scrollbar-color wird die Farbe für den Ziehpunkt und die Rinne der Scrollleiste festgelegt.

Verwenden Sie scrollbar-width, um die Breite der Scrollleiste zu ändern. Sie können keine beliebige Länge festlegen, aber angeben, dass Sie eine thin- oder none-Scrollleiste wünschen.

scroll-behavior

Mit scroll-behavior können Sie das browsergesteuerte Scrollen zu Elementen aktivieren. So können Sie festlegen, wie die Navigation auf der Seite, z. B. .scrollTo() oder Links, behandelt wird.

Das ist besonders nützlich in Kombination mit prefers-reduced-motion, um das Scrollverhalten basierend auf den Nutzereinstellungen festzulegen.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

overscroll-behavior

Wenn Sie schon einmal das Ende eines modalen Overlays erreicht haben, dann weitergescrollt sind und sich die Seite hinter dem Overlay bewegt hat, handelt es sich um Scroll-Chaining oder das Bubbling-up zum übergeordneten Scroll-Container. Mit dem Attribut overscroll-behavior können Sie verhindern, dass das Scrollen bei Überlauf in einen übergeordneten Container übergeht (als Scroll-Chaining bezeichnet).

Scroll-Snapping

Das Scrollen ist in der Regel flüssig, sodass Sie die Inhalte im Scrollport beliebig positionieren können. Bei einigen Designs, z. B. Bildergalerien oder Inhalten, die Seiten oder Folien ähneln, kann es sinnvoll sein, die Inhalte am Scrollport auszurichten.

Scroll-Container einrichten

Wenn Sie das Scroll-Snapping aktivieren möchten, fügen Sie dem Scroll-Container scroll-snap-type hinzu. Zuerst legen Sie fest, auf welcher Achse das Scroll-Snapping erfolgen soll. Dies kann eine logische Property (block oder inline), eine physische Property (x oder y) oder both sein.

Sie können auch festlegen, wie streng das Scroll-Snapping sein soll. Die Standardeinstellung ist proximity. Das bedeutet, dass der Scroll-Container nach Möglichkeit einrastet. Sie können die Strenge auch auf mandatory festlegen, damit der Scrollcontainer immer einrastet.

.scroll-container {
    scroll-snap-type: block mandatory;
}

Beim Scroll-Snapping wird ein Element innerhalb der vollständigen Grenzen des Scroll-Containers ausgerichtet. Was passiert aber, wenn ein Teil des Scroll-Containers nicht sichtbar ist? Möglicherweise haben Sie beispielsweise einen fixierten Header, der einen Teil des Scroll-Containers überlagert. Mit scroll-padding können Sie die eingerasteten Elemente am sichtbaren Bereich des Scrollcontainers ausrichten.

Andockbare Elemente steuern

Wenn Sie ein Element andockbar machen möchten, legen Sie die Eigenschaft scroll-snap-align auf start, end oder center fest. Wenn die Scroll-Snap-Richtung both ist, können Sie zwei Werte festlegen. Damit wird festgelegt, ob ein Rand des Elements am Rand des Scrollports ausgerichtet oder zentriert wird.

Mit scroll-margin können Sie den Abstand um die Ränder des angedockten Elements anpassen:

scroll-margin wird auch verwendet, um den Abstand beim Scrollen zu einem Element festzulegen:

Wenn Sie das Scrollen „klebriger“ machen möchten, können Sie einem Element in einem Scrollcontainer scroll-snap-stop: always hinzufügen. Es wird nicht verhindert, dass Sie mit einem einzigen Scrollvorgang an mehreren Elementen vorbeiscrollen. Wenn Sie eine Scrollbewegung so beenden, dass das Scrollen mit Trägheit fortgesetzt würde, wird das Scrollen an der nächsten Einrastposition beendet, anstatt weiterzugehen.

Wissen testen

Ressourcen

Overflow And Data Loss In CSS from Smashing Magazine