CSS overflow

Die CSS overflow-Modul-Eigenschaften ermöglichen es Ihnen, scrollbaren Überlauf in visuellen Medien zu handhaben.

Überlauf tritt auf, wenn der Inhalt in einem Elementkasten über einen oder mehrere Ränder des Kastens hinausgeht. Scrollbarer Überlauf ist der Inhalt, der außerhalb des Elementenkastens erscheint, für den Sie möglicherweise einen Scrollmechanismus hinzufügen möchten. CSS-Überlaufeigenschaften ermöglichen es Ihnen, zu kontrollieren, was passiert, wenn Inhalt einen Elementkasten überläuft, einschließlich der Erstellung von Karussellen ohne JavaScript.

Malereffekte, die den Inhalt überfluten, aber nicht am CSS-Boxmodell teilnehmen, beeinflussen das Layout nicht. Dieser Überlauf wird auch als Ink Overflow bezeichnet. Beispiele für Ink Overflows sind Box-Schatten, Rahmenbilder, Textdekorationen, überhängende Glyphen und Umrisse. Ink Overflows erweitern die scrollbare Überlaufregion nicht.

Overflow in Aktion

Probieren Sie das folgende Beispiel aus, um die Effekte verschiedener overflow-Eigenschaftswerte auf den Inhaltsüberlauf und die Bildlaufleisten im angrenzenden festen Kasten zu sehen.

Das Beispiel enthält Optionen, um die Werte für die Eigenschaften overflow-clip-margin und width zu ändern sowie den Inhalt programmatisch zu scrollen, wenn die overflow-Eigenschaft einen scroll container erstellt. Wählen Sie overflow: clip und sehen Sie die Wirkung verschiedener overflow-clip-margin-Werte. Wählen Sie overflow: hidden oder overflow: scroll, um die verschiedenen ScrollLeft- und ScrollTop-Schieberegler-Einstellungen zu überprüfen.

Ein Link ist im Inhaltskasten oben enthalten, um die Effekte der Tastaturfokussierung auf Überlauf- und Bildlaufverhalten zu demonstrieren. Versuchen Sie, zum Link zu tabben oder den Inhalt programmatisch zu scrollen: Der Inhalt wird nur scrollen, wenn der aufgezählte <overflow>-Wert einen Scrollcontainer erstellt.

Referenz

Eigenschaften

Hinweis: Das CSS Overflow Module Level 4 führt die Eigenschaften block-ellipsis, continue, max-lines, overflow-clip-margin-block, overflow-clip-margin-block-end, overflow-clip-margin-block-start, overflow-clip-margin-bottom, overflow-clip-margin-inline, overflow-clip-margin-inline-end, overflow-clip-margin-inline-start, overflow-clip-margin-left, overflow-clip-margin-right und overflow-clip-margin-top ein. Diese wurden noch nicht implementiert.

Selektoren und Pseudoelemente

Datentypen

Leitfäden

Lernen: Überlaufender Inhalt

Lernen Sie, was Überlauf ist und wie Sie ihn verwalten.

Erstellen von CSS-Karussellen

Erstellen Sie reine CSS-Karussell-Benutzeroberflächenfunktionen mit Scroll-Buttons, Scroll-Markern und generierten Spalten.

Erstellen einer benannten Scroll-Fortschritts-Timeline-Animation

Die CSS-Scroll-Timeline scroll-timeline-name und scroll-timeline-axis-Eigenschaften zusammen mit der scroll-timeline-Kurzform erstellen Animationen, die an den Scroll-Offset eines Scrollcontainers gebunden sind.

Verwandte Konzepte

Spezifikationen

Specification
CSS Overflow Module Level 3
CSS Overflow Module Level 4
CSS Overflow Module Level 5

Siehe auch