Propriété CSS overflow-y
Apprenez comment CSS overflow-y contrôle le rognage vertical du contenu et les barres de défilement. Couvre toutes les valeurs, l'interaction avec overflow-x et des exemples.
La propriété overflow-y contrôle ce qui se passe lorsque le contenu d'un élément est plus haut que son conteneur. Vous pouvez laisser le contenu déborder, le rogner invisiblement, ou ajouter une barre de défilement — soit toujours, soit uniquement si nécessaire.
overflow-y est la moitié de la propriété raccourcie overflow sur deux axes. Sa contrepartie overflow-x gère la direction horizontale. Ensemble, ils vous donnent un contrôle précis sur la façon dont une boîte rogne et défile.
Référence de la propriété
| Valeur initiale | visible |
| S'applique à | Conteneurs de blocs, conteneurs flex et conteneurs grid |
| Héritée | Non |
| Animable | Non |
| Version | CSS3 |
| Syntaxe DOM | element.style.overflowY = "scroll" |
Syntaxe
overflow-y: visible | hidden | scroll | auto | clip | initial | inherit;Valeurs
| Valeur | Description |
|---|---|
visible | Le contenu n'est pas rogné et peut s'afficher au-delà des bords supérieur et inférieur du remplissage. C'est la valeur par défaut. |
hidden | Le contenu est rogné au niveau de la boîte de remplissage. Aucune barre de défilement n'est fournie ; le contenu rogné est inaccessible. |
scroll | Le contenu est rogné et une barre de défilement est toujours affichée, même si le contenu tient dans le conteneur. |
auto | Le contenu n'est rogné que s'il déborde. Le navigateur ajoute automatiquement une barre de défilement lorsque c'est nécessaire. |
clip | Le contenu est rogné comme avec hidden, mais désactive également le défilement programmatique (scrollTop). Plus restrictif que hidden. |
initial | Réinitialise la propriété à sa valeur par défaut (visible). |
inherit | Hérite de la valeur calculée de l'élément parent. |
Lorsque overflow-y est défini sur scroll, auto ou hidden, le navigateur modifie automatiquement toute valeur visible sur overflow-x en auto. En effet, une boîte ne peut pas être rognée sur un axe tout en restant vraiment non contrainte sur l'autre — la spécification interdit cette combinaison.
Quand utiliser chaque valeur
visible— la valeur par défaut ; utile lorsque vous souhaitez intentionnellement qu'un élément (comme une info-bulle ou un menu déroulant) déborde de ses limites sans être coupé.hidden— utilisez-la pour rogner les débordements décoratifs (par exemple, une grande image de fond qui ne devrait pas provoquer de barres de défilement sur la page) ou pour établir un nouveau contexte de mise en forme des blocs.scroll— utilisez-la lorsque vous voulez toujours réserver l'espace pour la barre de défilement afin que la mise en page ne se décale pas lorsque le contenu grandit. Utile dans les barres latérales ou les panneaux où la stabilité de la mise en page est importante.auto— le choix le plus courant pour les régions défilantes. La barre de défilement n'apparaît que lorsque le contenu déborde réellement, évitant ainsi la gouttière permanente créée parscroll.clip— utilisez-la lorsque vous devez empêcher tout défilement (y compris la manipulation JavaScript viascrollTop) à l'intérieur d'une région délimitée, sans afficher de barre de défilement.
Exemples
overflow-y: scroll
La barre de défilement est toujours affichée, même si tout le texte tient dans le conteneur. Le conteneur rogne verticalement et permet à l'utilisateur de faire défiler.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.scroll {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: scroll</h3>
<div class="scroll">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>overflow-y: visible
Le contenu s'affiche au-delà du bord inférieur du conteneur. Remarquez que le texte déborde hors de la boîte verte — aucun rognage n'a lieu.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.visible {
background-color: #8ebf42;
color: #666;
height: 40px;
width: 200px;
overflow-y: visible;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: visible</h3>
<div class="visible">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>overflow-y: hidden
Le contenu est rogné au bord inférieur du conteneur. Aucune barre de défilement n'apparaît et le contenu rogné ne peut pas être atteint en faisant défiler.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.hidden {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: hidden;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: hidden</h3>
<div class="hidden">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>overflow-y: auto
Une barre de défilement n'apparaît que lorsque le texte dépasse la hauteur fixe. Si le contenu faisait moins de 60 px, aucune barre de défilement ne serait affichée.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.auto {
background-color: #1c87c9;
color: #fff;
height: 60px;
width: 200px;
overflow-y: auto;
}
</style>
</head>
<body>
<h2>Overflow-y property example</h2>
<h3>Overflow-y: auto</h3>
<div class="auto">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</body>
</html>Toutes les valeurs côte à côte
Cet exemple place les quatre valeurs principales les unes à côté des autres afin que vous puissiez comparer leur comportement visuel en un coup d'œil.
<!DOCTYPE html>
<html>
<head>
<title>Title of the 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>Overflow-y property example</h2>
<h3>overflow-y: scroll</h3>
<div class="scroll">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
</div>
<h3>overflow-y: hidden</h3>
<div class="hidden">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>overflow-y: auto</h3>
<div class="auto">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<h3>overflow-y: visible</h3>
<div class="visible">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</body>
</html>Pièges courants
overflow-y: visible est silencieusement modifié par le navigateur. Si vous définissez overflow-x sur une valeur autre que visible sur le même élément, overflow-y: visible est traité comme auto. La spécification exige que les deux axes soient visible si l'un ou l'autre doit rester vraiment non contraint.
overflow-y: hidden crée un conteneur de défilement sans barre de défilement. Les utilisateurs ne peuvent pas faire défiler avec la molette de la souris ou un geste tactile, mais JavaScript peut toujours déplacer la position de défilement via scrollTop. Utilisez overflow-y: clip si vous souhaitez également empêcher cela.
Une height fixe est nécessaire pour que scroll et auto prennent effet. Sans hauteur contrainte, l'élément s'agrandit simplement pour s'adapter à son contenu, donc aucun débordement ne se produit jamais et aucune barre de défilement n'apparaît.
Défilement tactile sur mobile. Pour activer le défilement avec momentum dans un conteneur overflow-y: auto ou overflow-y: scroll sur iOS Safari, vous devrez peut-être ajouter -webkit-overflow-scrolling: touch dans les anciennes bases de code (cela n'est plus nécessaire dans les versions modernes d'iOS où c'est activé par défaut).
Contextes d'empilement. Définir overflow-y sur toute valeur autre que visible crée un nouveau contexte d'empilement sur cet élément. Cela peut affecter le comportement de z-index sur les éléments enfants qui tentent de déborder du conteneur.
Propriétés connexes
overflow— raccourci pour les deux axesoverflow-x— comportement du débordement horizontaloverflow-wrap— contrôle les sauts de ligne pour les mots longstext-overflow— comment le texte en ligne rogné est signalé (par exemple, ellipsis)scroll-behavior— si le défilement s'anime en douceur ou sauteresize— permet aux utilisateurs de redimensionner un conteneur défilantheight— la contrainte de hauteur qui déclenche le débordement