Le défilement vertical et horizontal est un moyen de naviguer sur une page Web à l'aide d'une souris, d'un pavé tactile ou d'un doigt. Le défilement vertical est utilisé lorsque le contenu d'un élément dépasse la hauteur du conteneur. Alors que le défilement horizontal est utilisé lorsque le contenu d'un élément dépasse la largeur du conteneur. Le défilement vertical permet aux utilisateurs de déplacer la page Web de haut en bas, tandis que le défilement horizontal permet à la page de se déplacer de gauche à droite. Tailwind CSS fournit des classes utilitaires pour permettre le défilement vertical et horizontal sur les pages Web.
Cet article illustrera :
- Comment activer le défilement vertical dans Tailwind ?
- Comment activer le défilement horizontal dans Tailwind ?
Comment activer le défilement vertical dans Tailwind ?
Pour activer le défilement vertical dans Tailwind, utilisez le ' débordement-y-défilement ” classe utilitaire avec l'élément souhaité dans le programme HTML. Il permet le défilement vertical et affiche toujours les barres de défilement à moins que l'utilisateur n'ait désactivé les barres de défilement 'toujours visibles' dans ses paramètres système.
Syntaxe
< élément classe = 'débordement-y-scroll ...' > ... élément >
Exemple : activation du défilement vertical
Dans cet exemple, nous allons créer un conteneur flexible avec des éléments flexibles dans une colonne et appliquer le ' débordement-y-défilement ” utilité pour elle:
< corps >
< div classe = 'flex flex-col overflow-y-scroll bg-violet-700 p-4 mx-14 mt-5 h-36' >
< div classe = 'bg-jaune-400 p-2 m-2' > 1 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 2 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 3 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 4 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 5 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 6 div >
div >
corps >
Ici, dans le parent
- ' fléchir ' La classe est utilisée pour ajuster les tailles de l'élément enfant en fonction de l'espace disponible en créant une mise en page flexible.
- ' flex-col ” La classe définit la direction flexible du conteneur sur une colonne.
- ' débordement-y-défilement ” classe permet le défilement vertical.
- ' bg-violet-700 ' La classe définit la couleur violette de l'arrière-plan du conteneur.
- ' p-4 ” classe définit 4 unités de rembourrage sur tous les côtés du conteneur.
- ' mx-14 ” classe applique les 14 unités de marge sur l'axe des abscisses du conteneur.
- ' mt-5 ” classe applique les 5 unités de marge au sommet du conteneur.
- ' h-36 ” classe définit la hauteur du conteneur à 36 unités.
Dans l'enfant
- ' bg-jaune-400 ” La classe définit l'arrière-plan des éléments de la grille sur jaune.
- ' p-2 ” ajoute 3 unités de rembourrage au contenu à l'intérieur des éléments flexibles.
- ' m-2 ” classe définit la marge de 2 unités pour les éléments flexibles.
Sortir
Dans la sortie ci-dessus, on peut voir que le défilement vertical a été activé avec succès.
Comment activer le défilement horizontal dans Tailwind ?
Pour activer le défilement horizontal dans Tailwind, utilisez le ' débordement-x-défilement ” classe utilitaire avec l'élément spécifique dans le programme HTML. Il permet le défilement horizontal et affiche toujours les barres de défilement à moins que l'utilisateur n'ait désactivé les barres de défilement 'toujours visibles' dans ses paramètres système.
Syntaxe
< élément classe = 'débordement-x-défilement ...' > ... élément >
Exemple : activation du défilement horizontal
Dans cet exemple, nous allons créer un conteneur flexible avec quelques éléments flexibles dans une rangée et appliquer le ' débordement-x-défilement ” utilité pour elle:
< corps >< div classe = 'flex flex-row débordement-x-scroll espace-x-24 bg-violet-700 p-4 mx-14 mt-5 h-36' >
< div classe = 'bg-jaune-400 p-2 m-2' > 1 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 2 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 3 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 4 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 5 div >
< div classe = 'bg-jaune-400 p-2 m-2' > 6 div >
div >
corps >
Ici, dans le parent
Sortir
La sortie ci-dessus indique que le défilement horizontal a été activé avec succès.
Conclusion
Pour activer le défilement vertical et horizontal dans Tailwind, le ' débordement-y-défilement ' et ' débordement-x-défilement ” les classes d'utilité sont utilisées respectivement. Ces utilitaires sont appliqués aux éléments souhaités dans le programme HTML pour permettre le défilement vertical et horizontal et toujours afficher les barres de défilement. Cet article a démontré la méthode pour activer le défilement vertical et horizontal dans Tailwind.