Dieser Artikel demonstriert die Verwendung der CSS-Eigenschaft overflow-y anhand zahlreicher Beispiele.
Wie verwende ich die Overflow-y-Eigenschaft in CSS?
Das CSS „ Überlauf-y Die Eigenschaft wird verwendet, um das Überlaufen des Inhalts entlang der Querachse innerhalb eines Elements zu steuern. Es gibt an, ob der Inhalt abgeschnitten oder eine Bildlaufleiste hinzugefügt werden soll, wenn der Inhalt die Höhe des Containers überschreitet. Die möglichen Werte für diese Eigenschaft sind „ sichtbar “, „ versteckt “, „ scrollen ', Und ' Auto “.
Schauen wir uns die folgenden Beispiele an, um die Overflow-y-Eigenschaft besser zu veranschaulichen:
Beispiel 1: Verwendung von Visible als Wert für die Overflow-y-Eigenschaft
Der ' sichtbar Der Wert „lässt zu, dass der Inhalt aus dem Container überläuft, und fügt keine Ausschnitte oder Bildlaufleisten hinzu. Besuchen Sie den folgenden praktischen Codeblock:
>
>
Die Beschreibung des obigen Codeblocks:
- Weisen Sie zunächst den Wert „ zu. Elternteil ' zum ' Klasse ” Attribut und nutzen Sie das „ Stil ” Attribut.
- Geben Sie außerdem den Wert „ sichtbar „zum CSS“ Überlauf-y ' Eigentum. Und setzen Sie es gleich auf „ Stil ”-Attribut, damit das CSS-Styling funktioniert.
- Als nächstes erstellen Sie eine verschachtelte „ div ” Element und weisen Sie ihm eine Klasse von „ zu Kinderinhalt “. Stellen Sie außerdem Dummy-Daten bereit.
Nutzen Sie nun die CSS-Eigenschaften, um die Visualisierung zu verbessern, was zum besseren Verständnis der CSS-Eigenschaft overflow-y beiträgt:
.Elternteil {Breite : 200px ;
Höhe : 150px ;
Grenze : 1px solide Schwarz ;
}
.childContent {
Höhe : 300px ;
Hintergrundfarbe : hellblau ;
}
Nachfolgend finden Sie eine Beschreibung der CSS-Eigenschaften:
- Zuerst die ' Elternteil „Klasse ist ausgewählt und die Werte von „ 200px “, „ 150px ', Und ' 1 Pixel einfarbig schwarz „sind dem CSS zugeordnet“ Breite “, „ Höhe ', Und ' Grenze ” Eigenschaften bzw.
- Wählen Sie als Nächstes „ Kinderinhalt ” Klasse und legen Sie die Werte von „ fest 300px ' Und ' hellblau „zum CSS“ Höhe ' Und ' Hintergrundfarbe ” Eigenschaften bzw. Diese Klasse wird erweitert um „ Elternteil „Klasse, die vom CSS gesteuert wird“ Überlauf ' Eigentum.
Nach der Zusammenstellung der Codeausschnitte sieht die Webseite folgendermaßen aus:
Der Schnappschuss zeigt an, dass der Überlaufinhalt jetzt sichtbar ist und die Bildlaufleiste oder der Ausschnitt nicht standardmäßig hinzugefügt wird.
Beispiel 2: Verwenden von Hidden als Wert für die Overflow-y-Eigenschaft
Der ' Überlauf-y „Immobilie mit einem Wert von“ versteckt „versteckt den gesamten Inhalt, der außerhalb seines übergeordneten Containers verschoben wird. Diese Eigenschaft fügt keine Bildlaufleisten hinzu, sondern schneidet stattdessen den übergelaufenen Inhalt ab:
>
>
Der obige Codeausschnitt enthält:
- Zuerst wird derselbe Code erneut eingefügt, wobei der Dummy-Inhalt im inneren div-Element erhöht wird.
- Als nächstes ändern Sie den Wert von „ Überlauf-y „Eigenschaft zu“ versteckt ' zum ' ”-Tag mit der Klasse „ Elternteil “.
Nach dem erneuten Rendern sieht die Webseite folgendermaßen aus:
Der Snapshot zeigt an, dass der Überlaufinhalt abgeschnitten wurde.
Beispiel 3: Verwenden von Scroll als Wert für die Overflow-y-Eigenschaft
Einstellen des Werts von „ Überlauf-y ” Eigentum an die „ scrollen „ermöglicht dem Endbenutzer das Scrollen durch die
Inhalt, der es überfüllt. Besuchen wir den folgenden Codeblock:
>
>Im obigen Codeblock:
- Zunächst wurde die gleiche HTML-Struktur in das „
' Schild. - Als nächstes ändern Sie den Wert von „ Überlauf-y ” Eigentum an die „ scrollen “. Dies ermöglicht die „ Elternteil ” div, um den Scrolleffekt zur Steuerung des übergelaufenen Inhalts zu aktivieren.
Nach der Kompilierung des obigen Codeblocks sieht die Webseite folgendermaßen aus:
Das obige GID zeigt, dass der Scroll-Effekt zur Steuerung des übergelaufenen Inhalts verfügbar war.
Beispiel 4: Verwenden von „Auto“ als Wert für die Overflow-y-Eigenschaft
In diesem Beispiel können Benutzer nur dann eine Bildlaufleiste hinzufügen, wenn der Inhalt nicht in den Container passt. Wenn der Inhalt nicht überläuft, wird die Bildlaufleiste auch nicht hinzugefügt. Dies ist möglich, indem der Wert „ Auto „zum CSS“ Überlauf-y ' Eigentum:
>
>Im obigen Codeblock:
- Fügen Sie zunächst dieselbe HTML-Datei in das „
' Schild. - Aktualisieren Sie als Nächstes den Wert von „ Überlauf-y „Eigenschaft zu“ Auto “. Es ermöglicht den Scrolleffekt relativ zur vertikalen Länge des Inhalts.
Nach Abschluss des Kompilierungsvorgangs funktioniert die Webseite folgendermaßen:
Das obige GIF zeigt die Überlaufeigenschaft an, die die Bildlaufleiste entsprechend der Länge des Inhalts aktiviert hat.
Abschluss
Das CSS „ Überlauf-y Die Eigenschaft „wird verwendet, um den überlaufenden Inhalt entlang der Querachse innerhalb eines Elements zu steuern. Die overflow-y-Eigenschaft steuert den Inhalt entsprechend dem spezifischen Wert, der den overflow-y-Eigenschaften bereitgestellt wird. Der ' visuell Der Wert „zeigt den übergelaufenen Inhalt an, der Wert „ versteckt Der Wert „“ verbirgt den Überlaufinhalt und der Wert „ scrollen „Wert fügt eine Bildlaufleiste hinzu, um den Inhalt zu steuern. Und wenn der Wert „ Auto „Die Bildlaufleiste fügt je nach Länge des Inhalts etwas hinzu oder entfernt es.
- Zunächst wurde die gleiche HTML-Struktur in das „