Vertikales und horizontales Scrollen sind Möglichkeiten, mit einer Maus, einem Touchpad oder einem Finger auf einer Webseite zu navigieren. Vertikales Scrollen wird verwendet, wenn der Inhalt eines Elements die Höhe des Containers überschreitet. Während horizontales Scrollen verwendet wird, wenn der Inhalt innerhalb eines Elements die Breite des Containers überschreitet. Durch vertikales Scrollen können Benutzer die Webseite nach oben und unten verschieben, während durch horizontales Scrollen die Seite nach links und rechts verschoben werden kann. Tailwind CSS bietet Hilfsklassen, um vertikales und horizontales Scrollen auf Webseiten zu ermöglichen.
Dieser Artikel veranschaulicht Folgendes:
- Wie aktiviere ich vertikales Scrollen in Tailwind?
- Wie aktiviere ich horizontales Scrollen in Tailwind?
Wie aktiviere ich vertikales Scrollen in Tailwind?
Um das vertikale Scrollen in Tailwind zu aktivieren, verwenden Sie „ Überlauf-y-Scroll ” Utility-Klasse mit dem gewünschten Element im HTML-Programm. Es ermöglicht vertikales Scrollen und zeigt die Bildlaufleisten immer an, es sei denn, der Benutzer hat die „immer sichtbaren“ Bildlaufleisten in seinen Systemeinstellungen deaktiviert.
Syntax
< Element Klasse = „overflow-y-scroll …“ > ... Element >
Beispiel: Vertikales Scrollen aktivieren
In diesem Beispiel erstellen wir einen Flex-Container mit einigen Flex-Elementen in einer Spalte und wenden das „ Überlauf-y-Scroll ” Dienstprogramm dazu:
< Körper >
< div Klasse = „flex flex-col overflow-y-scroll bg-purple-700 p-4 mx-14 mt-5 h-36“ >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 1 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 2 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 3 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 4 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 5 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 6 div >
div >
Körper >
Hier im übergeordneten
- „ biegen Die Klasse „“ wird verwendet, um die Größe des untergeordneten Elements auf der Grundlage des verfügbaren Platzes anzupassen, indem ein flexibles Layout erstellt wird.
- „ Flex-col Die Klasse „ legt die Flexrichtung des Containers auf eine Spalte fest.
- „ Überlauf-y-Scroll Die Klasse „ermöglicht vertikales Scrollen.
- „ bg-lila-700 Die Klasse „Legt die violette Farbe für den Hintergrund des Containers fest.
- „ S. 4 Die Klasse „legt 4 Polstereinheiten auf allen Seiten des Containers fest.
- „ mx-14 Die Klasse „wendet die 14 Margin-Einheiten auf der x-Achse des Containers an.
- „ mt-5 Die Klasse „wendet die 5 Einheiten Rand auf die Oberseite des Containers an.
- „ h-36 Die Klasse „Setzt die Höhe des Containers auf 36 Einheiten.
Im untergeordneten
- „ bg-gelb-400 Die Klasse „Setzt den Hintergrund der Rasterelemente auf Gelb.
- „ S. 2 Die Klasse „Fügt 3 Fülleinheiten zum Inhalt innerhalb der Flex-Elemente hinzu.
- „ m-2 Die Klasse „legt den 2-Einheiten-Rand für die Flex-Elemente fest.
Ausgang
In der obigen Ausgabe ist zu sehen, dass das vertikale Scrollen erfolgreich aktiviert wurde.
Wie aktiviere ich horizontales Scrollen in Tailwind?
Um das horizontale Scrollen in Tailwind zu aktivieren, verwenden Sie die Schaltfläche „ Überlauf-X-Scroll ” Dienstprogrammklasse mit dem spezifischen Element im HTML-Programm. Es ermöglicht horizontales Scrollen und zeigt die Bildlaufleisten immer an, es sei denn, der Benutzer hat die „immer sichtbaren“ Bildlaufleisten in seinen Systemeinstellungen deaktiviert.
Syntax
< Element Klasse = „overflow-x-scroll …“ > ... Element >
Beispiel: Horizontales Scrollen aktivieren
In diesem Beispiel erstellen wir einen Flex-Container mit einigen Flex-Elementen in einer Reihe und wenden das „ Überlauf-X-Scroll ” Dienstprogramm dazu:
< Körper >< div Klasse = „flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36“ >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 1 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 2 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 3 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 4 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 5 div >
< div Klasse = „bg-gelb-400 p-2 m-2“ > 6 div >
div >
Körper >
Hier im übergeordneten
Ausgang
Die obige Ausgabe zeigt an, dass das horizontale Scrollen erfolgreich aktiviert wurde.
Abschluss
Um vertikales und horizontales Scrollen in Tailwind zu ermöglichen, muss „ Überlauf-y-Scroll ' Und ' Überlauf-X-Scroll Es werden jeweils Utility-Klassen verwendet. Diese Dienstprogramme werden auf die gewünschten Elemente im HTML-Programm angewendet, um vertikales und horizontales Scrollen zu ermöglichen und die Bildlaufleisten immer anzuzeigen. In diesem Artikel wurde die Methode zum Aktivieren des vertikalen und horizontalen Scrollens in Tailwind demonstriert.