Pour ajouter une barre de défilement à une div, il suffit de spécifieroverflowcomme valeur de l'attributautoC'est tout. L'exemple suivant définit une barre de défilement horizontale pour la div :

Exemple

<div style="height:300px;width:70px;overflow:auto;background:#EEEEEE;">Tutoriel d'exemple -- Ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple -- Ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple -- Ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple -- Ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!!</div>

Essayez-le vous-même »

La largeur et la hauteur peuvent être définies selon les besoins réels.

L'exemple ci-dessus montre que si la hauteur du contenu de la div est supérieure à 300px, une barre de défilement verticale apparaîtra ; si elle est inférieure à 300px, il n'y a pas de barre de défilement. Si la largeur est supérieure à 70px, une barre de défilement horizontale apparaîtra ; si elle est inférieure, il n'y en a pas.

Si vous voulez que la barre de défilement soit toujours présente dans la div, vous pouvez définir la propriété overflow sur scroll :

Vous pouvez également définir overflow sur scroll, c'est-à-dire :

Exemple

<div style="height:300px;width:200px;overflow:scroll;background:#EEEEEE;">Tutoriel d'exemple -- Ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple -- Ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple -- Ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!! Tutoriel d'exemple -- Ce que vous apprenez n'est pas seulement la technologie, mais aussi les rêves !!!</div>

Essayez-le vous-même »

Paramètres supplémentaires

Définir uniquement la barre de défilement horizontale :

<div style="width:100px;overflow-x:auto"></div>

Définir uniquement la barre de défilement verticale :

<div style="height:300px;overflow-y:auto"></div>

Définir les barres de défilement horizontale et verticale :

<div style="width:70px;height:300px;overflow-x:auto;overflow-y:auto"></div>

Pour plus d'articles, consultez :

Mise en page CSS - Overflow

Propriété overflow de CSS