Vertikal och horisontell rullning är sätt att navigera på en webbsida med hjälp av en mus, en pekplatta eller ett finger. Vertikal rullning används när innehållet i ett element överstiger behållarens höjd. Medan horisontell rullning används när innehållet i ett element överskrider behållarens bredd. Vertikal rullning gör det möjligt för användare att flytta webbsidan upp och ned medan horisontell rullning gör att sidan kan flyttas åt vänster och höger. Tailwind CSS tillhandahåller verktygsklasser för att möjliggöra vertikal och horisontell rullning på webbsidor.
Denna artikel kommer att exemplifiera:
Hur aktiverar man vertikal rullning i medvind?
För att aktivera vertikal rullning i Tailwind, använd ' overflow-y-scroll ” verktygsklass med önskat element i HTML-programmet. Den tillåter vertikal rullning och visar alltid rullningslistorna om inte användaren har inaktiverat de 'alltid synliga' rullningslistorna i sina systeminställningar.
Syntax
< element klass = 'overflow-y-scroll...' > ... element >
Exempel: Aktivera vertikal rullning
I det här exemplet kommer vi att skapa en flexbehållare med några flexartiklar i en kolumn och tillämpa ' overflow-y-scroll ' nytta för det:
< kropp >
< div klass = 'flex flex-col overflow-y-scroll bg-lila-700 p-4 mx-14 mt-5 h-36' >
< div klass = 'bg-yellow-400 p-2 m-2' > 1 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 2 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 3 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 4 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 5 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
kropp >
Här, i den överordnade
- ' böja Klass används för att anpassa storleken på det underordnade elementet utifrån tillgängligt utrymme genom att skapa en flexibel layout.
- ' flex-col ” klass ställer in behållarens flexriktning till en kolumn.
- ' overflow-y-scroll ” klass möjliggör vertikal rullning.
- ' bg-lila-700 ” klass ställer in den lila färgen till behållarens bakgrund.
- ' p-4 ”-klassen ställer in 4 enheter av stoppning på containerns alla sidor.
- ' mx-14 ” klass tillämpar de 14 marginalenheterna på containerns x-axel.
- ' mt-5 ” klass tillämpar de 5 enheterna marginal till toppen av behållaren.
- ' h-36 ” klass sätter höjden på containern till 36 enheter.
I barnet
- ' bg-gul-400 ” klass ställer in bakgrunden för rutnätsobjekten till gul.
- ' p-2 ” klass lägger till 3 enheter stoppning till innehållet inuti flexartiklarna.
- ' m-2 ”-klassen ställer in marginalen på 2 enheter till flexartiklarna.
Produktion
I ovanstående utdata kan det ses att vertikal rullning har aktiverats framgångsrikt.
Hur aktiverar man horisontell rullning i medvind?
För att aktivera horisontell rullning i Tailwind, använd ' overflow-x-scroll ” verktygsklass med det specifika elementet i HTML-programmet. Den möjliggör horisontell rullning och visar alltid rullningslistorna såvida inte användaren har inaktiverat de 'alltid synliga' rullningslistorna i sina systeminställningar.
Syntax
< element klass = 'overflow-x-scroll ...' > ... element >
Exempel: Aktivera horisontell rullning
I det här exemplet kommer vi att skapa en flexbehållare med några flexartiklar i rad och tillämpa ' overflow-x-scroll ' nytta för det:
< kropp >< div klass = 'flex flex-rad overflow-x-scroll space-x-24 bg-lila-700 p-4 mx-14 mt-5 h-36' >
< div klass = 'bg-yellow-400 p-2 m-2' > 1 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 2 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 3 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 4 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 5 div >
< div klass = 'bg-yellow-400 p-2 m-2' > 6 div >
div >
kropp >
Här i föräldern
Produktion
Ovanstående utdata indikerar att horisontell rullning har aktiverats framgångsrikt.
Slutsats
För att möjliggöra vertikal och horisontell rullning i Tailwind, ' overflow-y-scroll ' och ' overflow-x-scroll ” nyttoklasser används respektive. Dessa verktyg tillämpas på de önskade elementen i HTML-programmet för att möjliggöra vertikal och horisontell rullning och alltid visa rullningslisterna. Den här artikeln har demonstrerat metoden för att möjliggöra vertikal och horisontell rullning i Tailwind.