Cet article explique la méthode pour empêcher le contenu de déborder et activer le défilement à l'aide de CSS.
Comment arrêter le débordement de contenu et activer le défilement ?
Le but d'empêcher le contenu de déborder est que le contenu s'intègre dans son conteneur et n'ait pas d'impact négatif sur les performances du site Web. Il peut facilement comprendre le contexte et peut améliorer l'accessibilité pour les utilisateurs. Pour une explication détaillée, discutons à travers un exemple :
Étape 1 : Activer le défilement avec débordement de contenu
Dans un premier temps, commencez par créer un tableau à l'intérieur du fichier HTML sur lequel l'effet de défilement sera appliqué. Supposons que la table soit déjà créée et qu'elle se compose de six lignes et de sept colonnes, et que des données factices soient fournies à la table :
< tableau >
< tr >
< e > Tête 1 < / e >
< e > Tête 2 < / e >
< e > Tête 3 < / e >
< e > Tête 4 < / e >
< e > Tête 5 < / e >
< e > Tête 6 < / e >
< e > Tête 7 < / e >
< / tr >
< tr >
< td > Rangée 1 < / td >
< td > Rangée 1 < / td >
< td > Rangée 1 < / td >
< td > Rangée 1 < / td >
< td > Rangée 1 < / td >
< td > Rangée 1 < / td >
< td > Rangée 1 < / td >
< / tr >
< tr >
< td > Rangée 2 < / td >
< td > Rangée 2 < / td >
< td > Rangée 2 < / td >
< td > Rangée 2 < / td >
< td > Rangée 2 < / td >
< td > Rangée 2 < / td >
< td > Rangée 2 < / td >
< / tr >
< tr >
< td > Rangée 3 < / td >
< td > Rangée 3 < / td >
< td > Rangée 3 < / td >
< td > Rangée 3 < / td >
< td > Rangée 3 < / td >
< td > Rangée 3 < / td >
< td > Rangée 3 < / td >
< / tr >
< tr >
< td > Rangée 4 < / td >
< td > Rangée 4 < / td >
< td > Rangée 4 < / td >
< td > Rangée 4 < / td >
< td > Rangée 4 < / td >
< td > Rangée 4 < / td >
< td > Rangée 4 < / td >
< / tr >< tr >
< td > Rangée 5 < / td >
< td > Rangée 5 < / td >
< td > Rangée 5 < / td >
< td > Rangée 5 < / td >
< td > Rangée 5 < / td >
< td > Rangée 5 < / td >
< td > Rangée 5 < / td >
< / tr >
< tr >
< td > Rangée 6 < / td >
< td > Rangée 6 < / td >
< td > Rangée 6 < / td >
< td > Rangée 6 < / td >
< td > Rangée 6 < / td >
< td > Rangée 6 < / td >
< td > Rangée 6 < / td >
< / tr >
< / tableau >
Après l'exécution de l'extrait de code ci-dessus, la page Web apparaît comme ceci :
La sortie affiche que les données de la table sont dans un format moins lisible et que beaucoup d'espace est acquis par la table.
Étape 2 : Réglage du débordement et de l'effet de défilement Dans l'extrait de code ci-dessus : Après l'exécution de l'extrait de code ci-dessus, la page Web apparaît comme ceci : La page Web montre que le tableau consomme désormais moins d'espace et empêche le contenu de déborder. De plus, l'effet de défilement a été activé. Note : En réglant ' débordement : automatique ' ou ' débordement : défilement ”, les utilisateurs peuvent activer le défilement pour le contenu débordant. De plus, le « débordement caché ” peut être utilisé pour éviter tout débordement. Les propriétés 'overflow-x' et 'overflow-y' sont utilisées pour contrôler le débordement et permettre le défilement sur l'axe horizontal et vertical. Il empêche le contenu de déborder et permet le défilement pour créer une conception réactive interactive pour tous les appareils. Cet article a montré comment empêcher le contenu de déborder et activer le défilement à l'aide de CSS.
Après cela, enveloppez la table avec un parent '
.débordement {
largeur : 200px ;
hauteur : 200px ;
débordement-x : auto ;
débordement-y : auto ;
comportement de défilement : lisse ;
}
Conclusion