Le SSC ' débordement ” est utilisée pour contrôler le débordement du contenu de l'élément HTML sélectionné. Le contenu peut être contrôlé dans une direction spécifique à l'aide de ' débordement-y ' et ' débordement-x ' propriétés. La propriété 'overflow' accepte des valeurs telles que ' faire défiler ”, “ visible ”, “ caché ' et ' auto ” et leurs fonctionnalités varient les unes des autres. Cependant, ce guide montre la différence entre overflow:scroll et overflow:auto à l'aide d'exemples pratiques.
En quoi overflow:scroll diffère-t-il de overflow:auto ?
La principale différence entre ' faire défiler ' et ' auto ” valeurs est que le “ débordement:défilement ” affiche toujours une barre de défilement, qu'elle soit nécessaire ou non, ce qui crée une distraction visuelle. D'autre part, le « débordement:auto ” n'affiche la barre de défilement que lorsque le contenu est débordé. De cette façon, une conception plus propre et plus rationalisée peut être créée qui attire facilement l'attention de l'utilisateur.
Exemple 1 : Utilisation de la propriété overflow:scroll
Le SSC ' débordement:défilement ” définit la barre de défilement par défaut pour contrôler le contenu débordé. Il ne voit pas le contenu de débordement et applique ensuite la barre de défilement. Au lieu de cela, il affiche une barre de défilement horizontale et verticale après la compilation du code, mais l'utilisateur peut modifier et afficher uniquement une barre de défilement latérale en fonction des exigences de la conception.
Visitez le code ci-dessous pour utiliser la propriété 'overflow:scroll':
< div >
< h3 > Exemple pour Débordement : faire défiler h3 >
< div classe = 'scrollingBox scroll' >
< p > Ce n'est qu'un contenu factice utilisé pour la démonstration de la différence entre le défilement de la valeur de la propriété overflow-y et auto.
p >
div >
div >
Dans le bloc de code ci-dessus :
- Tout d'abord, la racine ' div ” est créé et utilise le “ imbriqué ” ” étiquette dedans.
- Ensuite, attribuez les classes de ' défilementBox ' et ' faire défiler ' aux imbriquées déjà créées '
' étiqueter.- Enfin, fournissez des données factices au ' ' et ' ' balises à l'intérieur du ' div ' éléments.
Après la création de la structure HTML, appliquez la propriété CSS overflow :
< style >
.scrollingBox {
largeur : 300 pixels ;
hauteur : 150px ;
bordure : 1 pixel gris foncé uni ;
}
.faire défiler {
débordement : défilement ;
}
style >Description du code CSS ci-dessus :
- Tout d'abord, sélectionnez le ' défilementBox ” classe et fournit les valeurs de “ 300px ”, “ 150px ' et ' 1px gris foncé solide « au CSS » largeur ”, “ hauteur ', et ' frontière ' propriétés. Ces propriétés sont utilisées pour un meilleur processus de visualisation.
- Ensuite, le « faire défiler ” classe est sélectionné, et la valeur de “ faire défiler ' est passé au CSS ' débordement ' propriété.
Après la fin de la phase de compilation :
La sortie ci-dessus montre que le contenu ne déborde pas, mais la barre de défilement a été ajoutée sur les axes X et Y.
Exemple 2 : Utilisation de la propriété overflow:auto
La propriété overflow:auto est comme overflow:scroll car les deux peuvent afficher la barre de défilement. La seule différence est que le ' débordement:auto ” ajoute une barre de défilement lorsque le contenu déborde et si le contenu ne déborde pas, la barre de défilement n'est pas ajoutée. Il est principalement utilisé lors de la création de conceptions Web réactives en raison de sa nature évolutive.
Par exemple, visitez le code ci-dessous :
< div classe = 'auto-exemple' >
< h3 > Exemple pour Débordement : automatique h3 >
< div classe = 'scrollingBox' style = 'débordement : automatique' >
< p > Ce n'est qu'un contenu factice utilisé pour la démonstration de la différence entre le défilement de la valeur de la propriété overflow-y et auto.
p >
div >
div >Dans le bloc de code ci-dessus :
- Tout d'abord, la même structure HTML est utilisée et les données factices fournies au ' h3 ', et ' p ” éléments est modifié.
- Ensuite, le « style L'attribut ” est utilisé avec l'imbrication intérieure “ div ” élément et définit la valeur de “ auto « au CSS » débordement ' propriété.
Après l'exécution, le ' div ' L'élément apparaît maintenant comme ceci :
L'instantané ci-dessus montre que la barre de défilement n'est pas ajoutée en fonction de la longueur du contenu.
Maintenant, juste pour un peu plus d'informations sur le ' débordement:auto ' propriété. Essayez de fournir une grande quantité de données au ' div ' élément. Après la mise à jour du code, la page Web ressemble à ceci :
La sortie confirme que la barre de défilement est maintenant ajoutée en raison de la présence de contenu de débordement.
Conclusion
Le ' débordement:défilement ' et ' débordement:auto ” Les propriétés diffèrent dans la situation où elles ajoutent la barre de défilement. Le 'overflow:scroll' affiche toujours une barre de défilement, que le contenu soit débordé ou non. Tandis que 'overflow:auto' n'affiche une barre de défilement que lorsque le contenu de l'élément HTML sélectionné déborde. La valeur du CSS ' débordement ” la propriété dépend de la conception spécifique et des exigences d'expérience utilisateur. Cet article a démontré la différence entre les propriétés 'overflow:scroll' et 'overflow:auto'.
- Ensuite, attribuez les classes de ' défilementBox ' et ' faire défiler ' aux imbriquées déjà créées '