Propriété CSS overflow-y

❮ Précédent Suivant ❯

La propriété overflow-y spécifie si le contenu doit être masqué, visible ou défiler verticalement lorsque le contenu dépasse les bords supérieur et inférieur de l'élément.

La propriété overflow-y a quatre valeurs: visible, hidden, scroll, auto.

Si la valeur de la propriété overflow-y est définie à visible, la valeur de overflow-x, par défaut, sera définie à visible.

Si la valeur de overflow-y es définie à scroll, auto, ou hidden, la valeur de overflow-x sera définie à auto.

Valeur initiale	visible
Appliquée à	Conteneurs bloc, flex et ceux de la grille.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.overflowY = "auto";

Syntaxe

overflow-y: visible | hidden | scroll | auto | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div.scroll {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: scroll;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-y</h2>
    <h3>Overflow-y: scroll</h3>
    <div class="scroll">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
  </body>
</html>

Essayez-vous-même!

Voyons un exemple avec la valeur "visible" :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div.visible {
      background-color: #8ebf42;
      color: #666;
      height: 40px;
      width: 200px;  
      overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-y </h2>
    <h3>Overflow-y: visible</h3>
    <div class="visible">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple avec la valeur "hidden" :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div.hidden {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: hidden;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-y</h2>
    <h3>Overflow-y: hidden</h3>
    <div class="hidden">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
  </body>
</html>

Essayez-vous-même!

Exemple avec la valeur "auto":

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div.auto {
      background-color: #1c87c9;
      color: #fff;
      height: 60px;
      width: 200px;
      overflow-y: auto;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-y</h2>
    <h3>Overflow-y: auto</h3>
    <div class="auto">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple, qui contient tous les quatre valeurs:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div.scroll {
      background-color: #8ebf42;
      height: 70px;
      width: 150px; 
      overflow-y: scroll;
      }
      div.hidden {
      background-color: #8ebf42;
      height: 70px;
      width: 150px;   
      overflow-y: hidden;
      }
      div.auto {
      background-color: #8ebf42;
      height: 70px;
      width: 150px;  
      overflow-y: auto;
      }
      div.visible {
      background-color: #8ebf42;
      height: 70px;
      width: 150px; 
      overflow-y: visible;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété overflow-y</h2>
    <h3>overflow-y: scroll</h3>
    <div class="scroll">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte</div>
    <h3>overflow-y: hidden</h3>
    <div class="hidden">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte</div>
    <h3>overflow-y: auto</h3>
    <div class="auto">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte</div>
    <h3>overflow-y: visible</h3>
    <div class="visible">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte</div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
visible	Le contenu n'est pas tronqué et s'affiche en dehors des bords gauche et droit de la zone de remplissage. C'est la valeur par défaut de cette propriété.
hidden	Le contenu est coupé pour s’ajuster verticalement dans la zone de remplissage. Aucune barre de défilement n'est ajoutée.
scroll	Le contenu est coupé pour s’ajuster verticalement dans la zone de remplissage. La barre de défilement est ajoutée pour voir le reste du contenu.
auto	Le contenu est coupé pour s’ajuster verticalement dans la zone de remplissage. Dépend du navigateur. Si le contenu déborde, la barre de défilement est ajoutée.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.