overflow-y
La propriété CSS overflow-y
permet de définir les mécanismes à utiliser (rognage, ascenseurs, dépassement, etc.) lorsque le contenu dépasse des bords haut et bas de la boîte. Cette propriété peut aussi être définie par la propriété raccourcie overflow
.
Exemple interactif
Syntaxe
/* Valeurs avec un mot-clé */
overflow-y: visible;
overflow-y: hidden;
overflow-y: clip;
overflow-y: scroll;
overflow-y: auto;
/* Valeurs globales */
overflow-y: inherit;
overflow-y: initial;
overflow-y: revert;
overflow-y: revert-layer;
overflow-y: unset;
La propriété overflow-y
est définie avec une valeur de type <overflow>
(voir les valeurs ci-après).
Si overflow-x
vaut hidden
, scroll
ou auto
et que cette propriété vaut visible
(la valeur par défaut), la valeur calculée sera implicitement auto
.
Valeurs
visible
-
Le contenu n'est pas rogné. Il peut être affiché en dehors de la boîte de remplissage (padding box) en haut et en bas malgré le manque d'espace. La boîte de l'élément n'est pas un conteneur de défilement.
-
Le contenu est rogné afin de tenir verticalement dans la boîte de remplissage (padding box) et aucun ascenseur vertical n'est affiché.
clip
-
Le contenu qui dépasse est rogné sur le bord de la limite de dépassement définie avec la propriété
overflow-clip-margin
. Ainsi, le contenu dépasse de la boîte de remplissage de l'élément d'autant que la longueur fournie paroverflow-clip-margin
ou de0px
si cette dernière n'est pas définie. Contrairement àhidden
,clip
interdit tout défilement, y compris celui qui proviendrait d'un script. Aucun contexte de formatage supplémentaire n'est créé. Pour établir un contexte de formatage, il faudra utiliseroverflow: clip
avecdisplay: flow-root
. La boîte de l'élément n'est pas un conteneur de défilement. scroll
-
Le contenu est rogné afin de tenir verticalement au sein de la boîte de remplissage (padding box) et le navigateur affiche des barres de défilement (ascenseurs) dans tous les cas. Cela permet d'éviter d'avoir des barres qui apparaissent / disparaissent dans un environnement dynamique. Les imprimantes peuvent imprimer le contenu qui dépasse.
auto
-
Le contenu qui dépasse est rogné dans la boîte de contenu et on peut le faire défiler pour le faire apparaître. À la différence de
scroll
, les agents utilisateur afficheront les ascenseurs uniquement si le contenu dépasse et les masqueront par défaut. Si le contenu tient dans la boîte de remplissage de l'élément, cette valeur aura le même effet quevisible
et établira un nouveau contexte de formatage de bloc. Les navigateurs de bureau fournissent des barres de défilement si le contenu dépasse.
Note :
La valeur overlay
est un synonyme historique de auto
. Avec overlay
, les barres de défilement étaient dessinées au-dessus du contenu plutôt que de prendre de l'espace.
Définition formelle
Valeur initiale | visible |
---|---|
Applicabilité | Block-containers, flex containers, and grid containers |
Héritée | non |
Valeur calculée | as specified, except with visible /clip computing to auto /hidden respectively if one of overflow-x or overflow-y is neither visible nor clip |
Type d'animation | discrète |
Syntaxe formelle
Exemples
HTML
<ul>
<li>
<code>overflow-y:hidden</code> — cache le texte en dehors de la boîte
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-y:scroll</code> — ajoute toujours un ascenseur
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-y:visible</code> — affiche le texte en dehors de la boîte si
besoin
<div id="div3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
<li>
<code>overflow-y:auto</code> — sur la plupart des navigateurs, cela sera
équivalent à <code>scroll</code>
<div id="div4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</li>
</ul>
CSS
div {
border: 1px solid black;
width: 250px;
height: 100px;
}
#div1 {
overflow-y: hidden;
margin-bottom: 12px;
}
#div2 {
overflow-y: scroll;
margin-bottom: 12px;
}
#div3 {
overflow-y: visible;
margin-bottom: 120px;
}
#div4 {
overflow-y: auto;
margin-bottom: 120px;
}
Résultat
Spécifications
Specification |
---|
CSS Overflow Module Level 3 # overflow-properties |
Compatibilité des navigateurs
BCD tables only load in the browser