overflow-y

Syntaxe

Paramètres

Description

Cette propriété permet de fixer le débordement vertical du défilement d'une balise.

Remarques

• Définition et rôle : La propriété overflow-y permet de contrôler la gestion du débordement vertical du contenu d'un élément. Elle détermine si le contenu excédentaire est visible, masqué, ou si une barre de défilement verticale est affichée.
• Différence avec overflow : Alors que overflow agit simultanément sur les axes horizontal et vertical, overflow-y cible uniquement l'axe vertical. Cela permet de définir des comportements distincts pour les débordements vertical et horizontal.
• Utilisation fréquente pour le défilement : La propriété overflow-y est souvent utilisée pour créer des zones défilantes verticalement, comme un menu fixe, un panneau latéral ou un conteneur de texte où seul l'axe vertical doit être géré.
• Accessibilité et UX : Une mauvaise gestion de overflow-y peut rendre une partie importante du contenu inaccessible (par exemple, avec hidden). Dans ce cas, il est recommandé de fournir une navigation alternative ou un moyen d'accéder au contenu masqué.
• Interaction avec overflow-x : La gestion du débordement vertical peut affecter le comportement horizontal. Par exemple, définir overflow-y: scroll peut parfois déclencher une barre de défilement horizontale si le contenu provoque également un léger débordement horizontal.
• Compatibilité navigateur Web : overflow-y est largement pris en charge par les navigateurs modernes, y compris Internet Explorer 8 et versions ultérieures. Cependant, les versions anciennes peuvent présenter des incohérences si combinées avec d'autres propriétés, comme overflow-x.
• Utilisation avec height ou max-height : La propriété overflow-y ne prend effet que si l'élément a une hauteur explicite (via height, max-height ou min-height). Si aucune hauteur n'est définie, l'élément s'étend naturellement pour inclure tout le contenu, rendant overflow-y inefficace.