CSS Overflow
Die CSS overflow-Moduleigenschaften ermöglichen es Ihnen, scrollbaren Überlauf in visuellen Medien zu steuern.
Überlauf tritt auf, wenn der Inhalt in einem Elementrahmen über eine oder mehrere Kanten des Rahmens hinausgeht. Scrollbarer Überlauf ist der Inhalt, der außerhalb des Elementrahmens erscheint und für den Sie möglicherweise eine Scrollmethode hinzufügen möchten. CSS-Überlaufeigenschaften erlauben es Ihnen, zu steuern, was passiert, wenn Inhalt aus einem Elementrahmen hinausläuft.
Malereffekte, die den Inhalt überfließen, aber nicht im CSS-Boxmodell teilnehmen, beeinflussen das Layout nicht. Diese Art von Überlauf ist auch bekannt als Ink Overflow. Beispiele für Ink Overflows umfassen Box-Schatten, Rahmenbilder, Textdekorationen, überhängende Glyphen und Umrisse. Ink Overflows erweitern nicht den Bereich des scrollbaren Überlaufs.
Überlauf in Aktion
Probieren Sie das folgende Beispiel aus, um die Auswirkungen verschiedener Werte der overflow
-Eigenschaft auf den Überlauf des Inhalts und die Bildlaufleisten in dem benachbarten festgelegten Rahmen zu sehen.
Das Beispiel enthält Optionen zum Ändern der Werte für die Eigenschaften overflow-clip-margin
und width
sowie für das programmgesteuerte Scrollen des Inhalts, falls die Eigenschaft Overflow einen Scroll-Container erstellt. Wählen Sie overflow: clip
und sehen Sie sich die Auswirkungen verschiedener overflow-clip-margin
-Werte an. Wählen Sie overflow: hidden
oder overflow: scroll
, um die verschiedenen Einstellungen der Schieberegler für ScrollLeft
und ScrollTop
zu überprüfen.
Ein Link ist im Inhaltsrahmen oben enthalten, um die Auswirkungen von Tastaturfokus auf Überlauf- und Scrollverhalten zu demonstrieren. Versuchen Sie, mit der Tabulatortaste zum Link zu navigieren oder den Inhalt programmgesteuert zu scrollen: Der Inhalt wird nur dann gescrollt, wenn der enumerierte <overflow>
-Wert einen Scroll-Container erstellt.
Referenz
Eigenschaften
line-clamp
overflow
Kurzformoverflow-block
overflow-clip-margin
overflow-inline
overflow-x
overflow-y
scroll-behavior
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 jedoch noch nicht implementiert.
Datentypen
<overflow>
Aufzählungswerte
Leitfäden
- Lernen: Überlaufender Inhalt
-
Lernen Sie, was Überlauf ist und wie man damit umgeht.
- Erstellen einer benannten Scroll-Fortschritts-Timeline-Animation
-
Die CSS-Scroll-Timeline-Eigenschaften
scroll-timeline-name
undscroll-timeline-axis
, sowie diescroll-timeline
-Kurzform, erstellen Animationen, die an den Scroll-Offset eines Scroll-Containers gebunden sind.
Verwandte Konzepte
scrollbar-width
CSS-Eigenschaftscrollbar-color
CSS-Eigenschaftscrollbar-gutter
CSS-Eigenschaftscroll-behavior
CSS-Eigenschaftscroll-margin
CSS-Kurzformscroll-padding
CSS-Kurzformscroll-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 - Scroll-Container-Glossarbegriff
- Ink Overflow-Glossarbegriff
Spezifikationen
Specification |
---|
CSS Overflow Module Level 3 |
CSS Overflow Module Level 4 |
Siehe auch
- CSS Scrollbars Styling-Modul
- CSS Scroll Snap-Modul
- CSSOM View-Modul
- Anleitung zum Debuggen von scrollbarem Überlauf