Dieser Artikel zeigt die Methode, um das Überlaufen von Inhalten zu verhindern und das Scrollen mit CSS zu ermöglichen.
Wie kann man das Überlaufen von Inhalten stoppen und das Scrollen aktivieren?
Der Zweck, das Überlaufen von Inhalten zu verhindern, besteht darin, dass der Inhalt in seinen Container passt und die Leistung der Website nicht negativ beeinflusst. Es kann den Kontext leicht verstehen und die Zugänglichkeit für die Benutzer verbessern. Für eine detaillierte Erklärung lassen Sie uns anhand eines Beispiels diskutieren:
Schritt 1: Aktivieren Sie das Scrollen mit Content Overflow
Beginnen Sie zunächst damit, eine Tabelle in der HTML-Datei zu erstellen, auf die der Bildlaufeffekt angewendet wird. Nehmen wir an, die Tabelle ist bereits erstellt und besteht aus sechs Zeilen und sieben Spalten, und der Tabelle werden einige Dummy-Daten bereitgestellt:
< Tisch >
< tr >
< th > Kopf 1 < / th >
< th > Kopf 2 < / th >
< th > Kopf 3 < / th >
< th > Kopf 4 < / th >
< th > Kopf 5 < / th >
< th > Kopf 6 < / th >
< th > Kopf 7 < / th >
< / tr >
< tr >
< td > Reihe 1 < / td >
< td > Reihe 1 < / td >
< td > Reihe 1 < / td >
< td > Reihe 1 < / td >
< td > Reihe 1 < / td >
< td > Reihe 1 < / td >
< td > Reihe 1 < / td >
< / tr >
< tr >
< td > Reihe 2 < / td >
< td > Reihe 2 < / td >
< td > Reihe 2 < / td >
< td > Reihe 2 < / td >
< td > Reihe 2 < / td >
< td > Reihe 2 < / td >
< td > Reihe 2 < / td >
< / tr >
< tr >
< td > Reihe 3 < / td >
< td > Reihe 3 < / td >
< td > Reihe 3 < / td >
< td > Reihe 3 < / td >
< td > Reihe 3 < / td >
< td > Reihe 3 < / td >
< td > Reihe 3 < / td >
< / tr >
< tr >
< td > Reihe 4 < / td >
< td > Reihe 4 < / td >
< td > Reihe 4 < / td >
< td > Reihe 4 < / td >
< td > Reihe 4 < / td >
< td > Reihe 4 < / td >
< td > Reihe 4 < / td >
< / tr >< tr >
< td > Reihe 5 < / td >
< td > Reihe 5 < / td >
< td > Reihe 5 < / td >
< td > Reihe 5 < / td >
< td > Reihe 5 < / td >
< td > Reihe 5 < / td >
< td > Reihe 5 < / td >
< / tr >
< tr >
< td > Reihe 6 < / td >
< td > Reihe 6 < / td >
< td > Reihe 6 < / td >
< td > Reihe 6 < / td >
< td > Reihe 6 < / td >
< td > Reihe 6 < / td >
< td > Reihe 6 < / td >
< / tr >
< / Tisch >
Nach der Ausführung des obigen Codeschnipsels sieht die Webseite wie folgt aus:
Die Ausgabe zeigt, dass Tabellendaten in einem weniger lesbaren Format vorliegen und viel Platz von der Tabelle beansprucht wird.
Schritt 2: Überlauf- und Bildlaufeffekt einstellen Im obigen Code-Snippet: Nach der Ausführung des obigen Codeschnipsels sieht die Webseite wie folgt aus: Die Webseite zeigt, dass die Tabelle jetzt weniger Platz verbraucht und verhindert, dass der Inhalt überläuft. Außerdem wurde der Scrolling-Effekt aktiviert. Notiz : Indem man es einstellt ' Überlauf: automatisch ' oder ' Überlauf: scrollen “, können Benutzer das Scrollen für überlaufende Inhalte aktivieren. Zusätzlich ' Überlauf versteckt “ kann verwendet werden, um einen Überlauf insgesamt zu verhindern. Die Eigenschaften „overflow-x“ und „overflow-y“ werden verwendet, um den Überlauf zu steuern und das Scrollen auf der horizontalen und vertikalen Achse zu ermöglichen. Es verhindert, dass der Inhalt überläuft und ermöglicht das Scrollen, um ein interaktives responsives Design für alle Geräte zu erstellen. In diesem Artikel wurde gezeigt, wie Sie verhindern, dass Inhalte überlaufen, und das Scrollen mithilfe von CSS aktivieren.
Wickeln Sie danach die Tabelle mit einem übergeordneten '
.Überlauf {
Breite : 200px ;
Höhe : 200px ;
Überlauf-x : Auto ;
Überlauf-y : Auto ;
Scroll-Verhalten : glatt ;
}
Abschluss