Maison >interface Web >tutoriel CSS >Créer un Div à défilement vertical en utilisant CSS
Créer un Div à défilement vertical en utilisant CSS
- PHPzavant
- 2023-09-06 17:29:021359parcourir
Le contenu que nous souhaitons utiliser sur notre site Web peut être volumineux et occuper beaucoup d'espace, ce qui signifie que d'autres éléments du site Web peuvent être déplacés, affectant la réactivité du site Web. Pour éviter que cela ne se produise, vous devez fournir à l'utilisateur un contenu déroulant afin que s'il est intéressé, il puisse faire défiler vers le bas pour lire l'intégralité du contenu.
Dans cet article, nous verrons comment faire défiler verticalement un div et quelles propriétés nous utiliserons pour y parvenir.
Comment faire défiler verticalement un div ?
L'attribut overflow peut être utilisé pour faire défiler verticalement un DIV car plusieurs valeurs peuvent être saisies dans l'attribut overflow. Il existe certaines valeurs telles que Hidden et Auto. Nous pouvons créer des barres de défilement horizontales et verticales en fonction des valeurs utilisées. Si nous utilisons la valeur automatique, nous pouvons obtenir une barre de défilement verticale. Jetons un coup d'œil à la syntaxe de l'attribut overflow :
Grammaire
overflow:hidden/visible/clip/scroll/auto/inherit;
Nous utiliserons l'axe x et l'axe y et définirons les propriétés de l'axe x sur caché et de l'axe y sur automatique, cela masquera la barre de défilement horizontale et affichera uniquement la barre de défilement verticale et nous obtiendrons automatiquement le div requis.
Exemple
Dans cet exemple, nous allons déclarer un div puis écrire un paragraphe où nous ajouterons l'attribut overflow pour faire défiler le div verticalement.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of vertically scrollable div</title>
<style>
h2 {
color: Green;
}
.scrl {
padding: 3px;
color: white;
margin: 2px, 2px;
background-color: black;
height: 118px;
overflow-x: hidden;
color: white;
overflow-y: auto;
text-align: justify;
width: 489px;
}
</style>
</head>
<body>
<center>
<h2>Hi! This an example of the vertically scrollable div</h2>
<div class="scrl">This is an example of the vertically scrollable
div many beginner coders need the help of some articles or some sort of tutorials
to write there code. There are many instances in which the coder might need help
or can be stuck on a particular question. The community of coders is very huge
and is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
Dans le code ci-dessus, nous avons utilisé l'attribut overflow et changé son axe x en caché et son axe y en visible, ce qui nous donne une barre de défilement verticale dans le paragraphe que nous écrivons ici. Regardons le résultat que nous obtenons en exécutant le code.
Vous pouvez regarder le résultat ci-dessus et vous pouvez voir que nous avons une barre de défilement vertical qui peut être utilisée pour faire défiler vers le bas.
Remarque - Lorsque nous utilisons l'attribut overflow, nous devons spécifier l'élément "block element", sinon cela risque de ne pas fonctionner. Étant donné que cette propriété est principalement utilisée pour découper le contenu ou ajouter des barres de défilement (verticalement ou horizontalement), car le contenu utilisé est trop volumineux pour tenir dans la zone spécifiée.
Voyons un autre exemple pour mieux comprendre cette propriété.
Exemple
Dans cet exemple, au lieu de changer les axes x et y de la propriété, nous définirons la valeur de la propriété sur auto pour faire défiler le div verticalement. Voici le code :
<!DOCTYPE html>
<html lang="en">
<head>
<title> Another Example of vertically scrollable div</title>
<style>
.scrlr {
margin: 4px;
padding: 4px;
color: white;
background-color: black;
width: 488px;
height: 118px;
margin: 4px;
text-align: justify;
overflow: auto;
width: 488px;
text-align: justify;
}
h2 {
color: Red;
}
</style>
</head>
<body>
<center>
<h2>Hi! This another example of the verticallly scrollable div</h2>
<div class="scrlr">This is an example of the vertically scrollable div
many beginner coders need the help of some articles or some sort of tutorials to
write there code. There are many instances in which the coder might need help or
can be stuck on a particular question. The community of coders is very huge and
is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
Dans le code ci-dessus, nous avons modifié la valeur de l'attribut de débordement de l'axe x caché et de l'axe y automatique à auto et avons utilisé le même exemple pour voir nos résultats de sortie. Jetons un coup d'œil à la sortie que ce code générera.
Vous pouvez regarder le résultat ci-dessus et vous pouvez voir que même avec la valeur automatique sur la propriété overflow, nous avons toujours des barres de défilement.
Conclusion
La propriété overflow est largement utilisée pour découper du contenu lorsqu'il prend beaucoup de place. Ou si nous voulons ajouter une barre de défilement pour que l'utilisateur puisse faire défiler vers le bas, réduisant ainsi l'espace global qu'elle occupe sur la page Web.
Dans cet article, nous avons appris comment utiliser l'attribut overflow et comment ajouter une barre de défilement verticale sur un div et en savoir plus sur les valeurs utilisées dans l'attribut overflow.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!