Comment puis-je ajouter automatiquement une barre de défilement verticale à mon div

Un conteneur Div en HTML peut avoir plusieurs éléments et sous-éléments et il a une taille spécifique. Ainsi, il est parfois nécessaire d'ajouter une barre de défilement avec le conteneur DIV lorsque les éléments dépassent la limite de taille du div ou lorsqu'ils ne s'installent pas correctement dans le conteneur DIV.

Cet article discutera de la méthode utile pour ajouter une barre de défilement verticale au div en utilisant automatiquement le HTML et le CSS.

Comment ajouter une barre de défilement verticale à la div?

Les développeurs peuvent ajouter des barres de défilement verticales à la div en appliquant le «débordement-y: faites défiler”Propriété ainsi que d'autres propriétés CSS sur l'élément de conteneur Div.

Exemple

Comprenons cela avec un exemple simple en créant d'abord un «div"Récipient avec quelques éléments HTML à l'intérieur, puis appliquant le CSS"débordement”Propriété pour ajouter une barre de défilement verticale avec la div:

Voici quelques célèbres frontaux et back-end
Langues:

Python

Javascrip

Java

Php

C #

Aller

Rapide

Rubis

Matlab

Manuscrit

Scala

Html

CSS

Rouiller

Perler

SQL

R

Nosql

C

C++

Dans l'extrait de code ci-dessus:

• UN ""L'élément a été ajouté avec une classe déclarée"Barre de défilement".
• Le "”Le conteneur a une liste de vingt langues frontales et arrière à l'intérieur.

Maintenant, il est nécessaire d'appliquer les propriétés CSS au div en ajoutant le sélecteur de classe:

.Barre de défilement

débordement-y: faites défiler;
max-height: 200px;
largeur maximale: 300px;
Texte-aligne: Centre;
Color d'arrière-plan: Azure;

Dans l'extrait de code CSS ci-dessus:

• Le "débordement«Propriété avec la valeur»faire défiler"Est ajouté pour créer une barre de défilement verticale pour le div.
• Après cela, le «hauteur maximum«Du conteneur div a été défini comme«200px" et le "largeur maximale"A été défini comme"300px".
• La valeur du «alignement de texte«La propriété est définie comme«centre«Pour aligner les éléments à l'intérieur du div au centre. Ceci est fait uniquement pour faire une meilleure présentation du conteneur div.
• La couleur d'arrière-plan du div a été définie comme «Azur"Cela différenciera l'apparence du conteneur div du reste de l'écran.

En conséquence, le conteneur Div sera créé et il aura une barre de défilement verticale sur le côté droit:

C'est ainsi que nous pouvons ajouter une barre de défilement verticale à un div automatiquement.

Conclusion

La barre de défilement verticale peut être ajoutée automatiquement à un div en se référant à l'élément DIV via un ID ou un sélecteur de classe dans l'élément de style CSS, puis appliquer le "débordement-y: faites défiler»Propriété à l'élément div. Les paramètres de la barre de défilement apparaîtront selon les autres propriétés ajoutées comme "hauteur maximum" et "largeur maximale”Du conteneur div. Ce blog est un guide informatif sur la méthode pour ajouter une barre de défilement verticale à un div.