CSS - Barres de défilement

Il peut y avoir un cas où le contenu d'un élément peut être plus grand que la quantité d'espace qui lui est allouée. Par exemple, des propriétés de largeur et de hauteur données ne laissent pas suffisamment de place pour accueillir le contenu de l'élément.

CSS fournit une propriété appelée overflow qui indique au navigateur ce qu'il doit faire si le contenu de la boîte est plus grand que la boîte elle-même. Cette propriété peut prendre l'une des valeurs suivantes -

N ° Sr. Valeur et description
1

visible

Permet au contenu de déborder des bordures de son élément conteneur.
2

hidden

Le contenu de l'élément imbriqué est simplement coupé à la bordure de l'élément contenant et aucune barre de défilement n'est visible.
3

scroll

La taille de l'élément contenant ne change pas, mais les barres de défilement sont ajoutées pour permettre à l'utilisateur de faire défiler pour voir le contenu.
4

auto

Le but est le même que le défilement, mais la barre de défilement ne sera affichée que si le contenu déborde.

Voici un exemple -

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Example of scroll value:</p>
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
   </body>
</html>

Il produira le résultat suivant -