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
line-clamp
overflow
Kurzformoverflow-block
overflow-clip-margin
overflow-inline
overflow-x
overflow-y
scroll-behavior
scroll-marker-group
scrollbar-gutter
text-overflow
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
<overflow>
aufgezählte Werte
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
undscroll-timeline-axis
-Eigenschaften zusammen mit derscroll-timeline
-Kurzform erstellen Animationen, die an den Scroll-Offset eines Scrollcontainers gebunden sind.
Verwandte Konzepte
::column
scrollbar-width
CSS-Eigenschaftscrollbar-color
CSS-Eigenschaftscrollbar-gutter
CSS-Eigenschaftscroll-behavior
CSS-Eigenschaftscroll-margin
CSS-Kurzform-Eigenschaftscroll-padding
CSS-Kurzform-Eigenschaftscroll-snap-align
CSS-Eigenschaftscroll-snap-stop
CSS-Eigenschaftscroll-snap-type
CSS-Eigenschafttext-overflow
CSS-Eigenschaft::-webkit-scrollbar
Pseudoelementscrollbar
ARIA-Rolle- Element
scroll()
-Methode - Element
scrollBy()
-Methode - Element
scrollIntoView()
-Methode - Element
scrollTo()
-Methode - Element
scrollTop
-Eigenschaft - Element
scrollLeft
-Eigenschaft - Element
scrollWidth
-Eigenschaft - Element
scrollHeight
-Eigenschaft - Dokument
scroll
-Ereignis - Scrollcontainer Glossareintrag
- Ink Overflow Glossareintrag
Spezifikationen
Specification |
---|
CSS Overflow Module Level 3 |
CSS Overflow Module Level 4 |
CSS Overflow Module Level 5 |
Siehe auch
- CSS-Scrollleisten-Styling Modul
- CSS-Scrollsnap Modul
- CSSOM-Ansicht Modul
- Anleitung zum Debugging von scrollbarem Überlauf