Verticaal en horizontaal scrollen zijn manieren om door een webpagina te navigeren met een muis, een touchpad of een vinger. Verticaal scrollen wordt gebruikt wanneer de inhoud van een element de hoogte van de container overschrijdt. Terwijl horizontaal scrollen wordt gebruikt wanneer de inhoud binnen een element de breedte van de container overschrijdt. Verticaal scrollen stelt gebruikers in staat om de webpagina omhoog en omlaag te bewegen, terwijl horizontaal scrollen de pagina naar links en rechts laat bewegen. Tailwind CSS biedt hulpprogrammaklassen om verticaal en horizontaal scrollen op webpagina's mogelijk te maken.
Dit artikel zal illustreren:
Hoe verticaal scrollen in Tailwind inschakelen?
Om verticaal scrollen in Tailwind in te schakelen, gebruikt u de ' overflow-y-scroll ” utility class met het gewenste element in het HTML-programma. Het staat verticaal scrollen toe en toont altijd de schuifbalken, tenzij de gebruiker de 'altijd zichtbare' schuifbalken in zijn systeeminstellingen heeft uitgeschakeld.
Syntaxis
< element klas = 'overloop-y-scroll ...' > ... element >
Voorbeeld: Verticaal scrollen inschakelen
In dit voorbeeld maken we een flexcontainer met enkele flexitems in een kolom en passen we de ' overflow-y-scroll ” nut eraan:
< lichaam >
< div klas = 'flex flex-col overloop-y-scroll bg-paars-700 p-4 mx-14 mt-5 h-36' >
< div klas = 'bg-geel-400 p-2 m-2' > 1 div >
< div klas = 'bg-geel-400 p-2 m-2' > 2 div >
< div klas = 'bg-geel-400 p-2 m-2' > 3 div >
< div klas = 'bg-geel-400 p-2 m-2' > 4 div >
< div klas = 'bg-geel-400 p-2 m-2' > 5 div >
< div klas = 'bg-geel-400 p-2 m-2' > 6 div >
div >
lichaam >
Hier, in de bovenliggende
- “ buigen ” klasse wordt gebruikt om de afmetingen van het onderliggende element aan te passen op basis van de beschikbare ruimte door een flexibele lay-out te creëren.
- “ flex-kl ” klasse stelt de flex-richting van de container in op een kolom.
- “ overflow-y-scroll ” klasse maakt verticaal scrollen mogelijk.
- “ bg-paars-700 ” class stelt de paarse kleur in op de achtergrond van de container.
- “ p-4 ” class plaatst 4 eenheden opvulling aan alle kanten van de container.
- “ mx-14 ” klasse past de 14 marge-eenheden toe op de x-as van de container.
- “ mt-5 ” class past de 5 eenheden marge toe op de bovenkant van de container.
- “ h-36 ” klasse stelt de hoogte van de container in op 36 eenheden.
In het kind
- “ bg-geel-400 ” class stelt de achtergrond van de rasteritems in op geel.
- “ p-2 ” klasse voegt 3 eenheden opvulling toe aan de inhoud binnen de flex-items.
- “ m-2 ” class stelt de marge van 2 eenheden in op de flexitems.
Uitgang
In de bovenstaande uitvoer is te zien dat verticaal scrollen met succes is ingeschakeld.
Hoe horizontaal scrollen in Tailwind inschakelen?
Om horizontaal scrollen in Tailwind in te schakelen, gebruikt u de ' overloop-x-scroll ”utility class met het specifieke element in het HTML-programma. Het maakt horizontaal scrollen mogelijk en toont altijd de schuifbalken, tenzij de gebruiker de 'altijd zichtbare' schuifbalken in zijn systeeminstellingen heeft uitgeschakeld.
Syntaxis
< element klas = 'overloop-x-scroll ...' > ... element >
Voorbeeld: Horizontaal scrollen inschakelen
In dit voorbeeld maken we een flexcontainer met enkele flexitems op een rij en passen we de “ overloop-x-scroll ” nut eraan:
< lichaam >< div klas = 'flex flex-row overflow-x-scroll space-x-24 bg-purple-700 p-4 mx-14 mt-5 h-36' >
< div klas = 'bg-geel-400 p-2 m-2' > 1 div >
< div klas = 'bg-geel-400 p-2 m-2' > 2 div >
< div klas = 'bg-geel-400 p-2 m-2' > 3 div >
< div klas = 'bg-geel-400 p-2 m-2' > 4 div >
< div klas = 'bg-geel-400 p-2 m-2' > 5 div >
< div klas = 'bg-geel-400 p-2 m-2' > 6 div >
div >
lichaam >
Hier in de bovenliggende
Uitgang
De bovenstaande uitvoer geeft aan dat horizontaal scrollen met succes is ingeschakeld.
Conclusie
Om verticaal en horizontaal scrollen in Tailwind mogelijk te maken, overflow-y-scroll ' En ' overloop-x-scroll ” utility-klassen worden respectievelijk gebruikt. Deze hulpprogramma's worden toegepast op de gewenste elementen in het HTML-programma om verticaal en horizontaal scrollen mogelijk te maken en altijd de schuifbalken weer te geven. Dit artikel heeft de methode gedemonstreerd om verticaal en horizontaal scrollen in Tailwind mogelijk te maken.