Lo scorrimento verticale e orizzontale sono modi per navigare in una pagina Web utilizzando un mouse, un touchpad o un dito. Lo scorrimento verticale viene utilizzato quando il contenuto di un elemento supera l'altezza del contenitore. Mentre lo scorrimento orizzontale viene utilizzato quando il contenuto all'interno di un elemento supera la larghezza del contenitore. Lo scorrimento verticale consente agli utenti di spostare la pagina Web su e giù mentre lo scorrimento orizzontale consente alla pagina di spostarsi a sinistra ea destra. Tailwind CSS fornisce classi di utilità per abilitare lo scorrimento verticale e orizzontale sulle pagine web.
Questo articolo esemplifica:
- Come abilitare lo scorrimento verticale in Tailwind?
- Come abilitare lo scorrimento orizzontale in Tailwind?
Come abilitare lo scorrimento verticale in Tailwind?
Per abilitare lo scorrimento verticale in Tailwind, utilizza il pulsante ' overflow-y-scroll ” classe di utilità con l'elemento desiderato nel programma HTML. Consente lo scorrimento verticale e mostra sempre le barre di scorrimento a meno che l'utente non abbia disabilitato le barre di scorrimento 'sempre visibili' nelle impostazioni di sistema.
Sintassi
< elemento classe = 'overflow-y-scroll ...' > ... elemento >
Esempio: abilitare lo scorrimento verticale
In questo esempio, creeremo un contenitore flessibile con alcuni elementi flessibili in una colonna e applicheremo il ' overflow-y-scroll ” utilità ad esso:
< corpo >
< div classe = 'flex flex-col overflow-y-scroll bg-viola-700 p-4 mx-14 mt-5 h-36' >
< div classe = 'bg-giallo-400 p-2 m-2' > 1 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 2 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 3 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 4 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 5 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 6 div >
div >
corpo >
Qui, nel genitore
- “ flettere La classe ” viene utilizzata per regolare le dimensioni dell'elemento figlio in base allo spazio disponibile creando un layout flessibile.
- “ flex col ” class imposta la direzione flessibile del contenitore su una colonna.
- “ overflow-y-scroll La classe ” consente lo scorrimento verticale.
- “ bg-viola-700 La classe ” imposta il colore viola sullo sfondo del contenitore.
- “ p-4 ” class imposta 4 unità di padding su tutti i lati del contenitore.
- “ mx-14 ” class applica le 14 unità di margine sull'asse x del contenitore.
- “ mt-5 La classe ” applica le 5 unità di margine alla parte superiore del contenitore.
- “ h-36 ” class imposta l'altezza del contenitore a 36 unità.
Nel figlio
- “ bg-giallo-400 La classe ” imposta su giallo lo sfondo degli elementi della griglia.
- “ p-2 La classe ” aggiunge 3 unità di riempimento al contenuto all'interno degli elementi flessibili.
- “ m-2 ” class imposta il margine di 2 unità per gli elementi flessibili.
Produzione
Nell'output sopra, si può vedere che lo scorrimento verticale è stato abilitato correttamente.
Come abilitare lo scorrimento orizzontale in Tailwind?
Per abilitare lo scorrimento orizzontale in Tailwind, utilizza il pulsante ' overflow-x-scorrimento ” classe di utilità con l'elemento specifico nel programma HTML. Abilita lo scorrimento orizzontale e mostra sempre le barre di scorrimento a meno che l'utente non abbia disabilitato le barre di scorrimento 'sempre visibili' nelle impostazioni di sistema.
Sintassi
< elemento classe = 'overflow-x-scorrimento ...' > ... elemento >
Esempio: abilitazione dello scorrimento orizzontale
In questo esempio, creeremo un contenitore flessibile con alcuni elementi flessibili in fila e applicheremo il ' overflow-x-scorrimento ” utilità ad esso:
< corpo >< div classe = 'flex flex-fila sfioro-x-scorri spazio-x-24 bg-viola-700 p-4 mx-14 mt-5 h-36' >
< div classe = 'bg-giallo-400 p-2 m-2' > 1 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 2 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 3 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 4 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 5 div >
< div classe = 'bg-giallo-400 p-2 m-2' > 6 div >
div >
corpo >
Qui nel genitore
Produzione
L'output precedente indica che lo scorrimento orizzontale è stato abilitato correttamente.
Conclusione
Per abilitare lo scorrimento verticale e orizzontale in Tailwind, il ' overflow-y-scroll ' E ' overflow-x-scorrimento ” vengono usate rispettivamente le classi di utilità. Queste utilità vengono applicate agli elementi desiderati nel programma HTML per abilitare lo scorrimento verticale e orizzontale e mostrare sempre le barre di scorrimento. Questo articolo ha dimostrato il metodo per abilitare lo scorrimento verticale e orizzontale in Tailwind.