Masquer ou désactiver le défilement avec CSS

Utilisez CSS selon que le contenu doit être rogné, que le défilement doit être totalement bloqué ou que seule la barre doit être masquée. overflow: hidden rogne le contenu qui déborde et supprime la barre visible ; ce n’est pas un simple changement esthétique.

Choisir la bonne règle CSS

La propriété abrégée overflow contrôle le débordement horizontal et vertical. Utilisez hidden uniquement lorsque le rognage est voulu. Utilisez scrollbar-width: none seulement si la zone reste défilable et identifiable. Utilisez overflow-x comme garde-fou après avoir corrigé l’élément responsable.

Désactiver le défilement et rogner le débordement

Limitez le composant et choisissez seulement l’axe nécessaire. La barre normale disparaît et le contenu hors de la boîte est rogné.

<div class="preview-panel"><p>Visible text.</p><p>Extra text is clipped.</p></div>

.preview-panel { max-block-size: 8rem; overflow-y: hidden; border: 1px solid #777; padding: 1rem; }

Le résultat ne montre aucune barre verticale ni texte sous le bord inférieur. Ne faites cela que si le contenu rogné est inutile ou révélé par un autre contrôle. Pour une fenêtre modale, une classe temporaire sur html et body peut bloquer la page ; testez souris, tactile, clavier et fermeture.

Masquer la barre tout en gardant le défilement

Si les lecteurs doivent atteindre tout le contenu, conservez overflow-y: auto et masquez la barre avec la propriété standard et un fallback limité.

.scroll-area { max-block-size: 10rem; overflow-y: auto; }
@supports (scrollbar-width: none) { .scroll-area { scrollbar-width: none; } }
@supports not (scrollbar-width: none) { .scroll-area::-webkit-scrollbar { display: none; } }

La zone reste défilable à la molette, au toucher, au clavier ou au pavé tactile. ::-webkit-scrollbar n’est pas standard. Le masquage peut rendre le défilement difficile à découvrir ; fournissez un indice visible ou un contrôle alternatif.

Empêcher le débordement horizontal

Une barre horizontale révèle souvent une erreur de mise en page : média à largeur fixe, élément flex qui ne rétrécit pas ou chaîne impossible à couper. Corrigez d’abord la cause.

.page-content { max-inline-size: 100%; overflow-x: hidden; }
.page-content img, .page-content video { display: block; max-inline-size: 100%; block-size: auto; }
.page-content code { overflow-wrap: anywhere; }

overflow-x: hidden est une protection finale, pas un remplacement du responsive. overflow-x: clip empêche aussi le défilement programmatique et ne doit pas entourer du contenu interactif nécessaire.

Ne pas confondre overscroll-behavior

overscroll-behavior: contain contrôle la propagation du défilement au bord d’une modale défilable. Il ne masque pas la barre et ne désactive pas le défilement.

Accessibilité et remarques navigateur

Ne masquez jamais texte essentiel, navigation, champs ou commandes sans alternative claire. Vérifiez le focus clavier : Tab ne doit pas atteindre un contenu rogné qui ne peut pas être révélé. overflow: hidden peut encore révéler un contenu focalisé ou défilé par script, contrairement à clip. scrollbar-gutter: stable réserve de l’espace mais ne masque ni ne désactive le défilement. Testez les vues étroites et larges, la souris, le tactile, Page Down, les flèches, Tab et un élément focalisé près du bord.

Avant publication, testez les états normal et contraint sur des fenêtres étroites et larges. Une modale doit rétablir le défilement de la page à sa fermeture et son contenu doit rester accessible. Examinez les images trop grandes, les URL longues, le code préformaté et les enfants flex ou grid plutôt que de masquer le problème par rognage.