Une barre de défilement horizontale qui apparaît sans raison apparente, c’est l’un des petits bugs CSS les plus agaçants. Le site semble presque correct, puis l’on remarque que la page peut glisser de quelques pixels vers la droite. Super. Une feature que personne n’a demandée.
Historiquement, on réglait souvent ce problème avec une règle brutale :
html {
overflow-x: hidden;
}Langage du code : CSS (css)Cette règle masque bien la barre de défilement horizontale. Toutefois, elle ne corrige pas forcément la cause du problème. Aujourd’hui, la bonne approche consiste plutôt à identifier l’élément qui déborde, corriger sa largeur, puis utiliser overflow-x seulement en dernier recours.
Pourquoi une barre de défilement horizontale apparaît ?
Une barre horizontale apparaît lorsqu’un élément dépasse la largeur du viewport ou de son conteneur. Le navigateur fait alors son travail : il ajoute un scroll horizontal pour permettre d’accéder au contenu qui déborde.
Les causes les plus fréquentes sont :
- un élément en
width: 100vwcombiné à du padding ou à une scrollbar verticale ; - une image, une vidéo ou un iframe sans
max-width: 100%; - un conteneur en
width: 100%avec padding sansbox-sizing: border-box; - une grille CSS trop large ;
- un élément flex qui refuse de rétrécir ;
- un mot, une URL ou un bloc de code trop long ;
- un élément positionné avec
left,right,transformou une marge négative ; - une animation qui sort temporairement du viewport ;
- un bloc WordPress aligné en pleine largeur mal contenu par le thème.
La tentation consiste à masquer le débordement. Parfois, c’est acceptable. Mais dans la plupart des cas, il vaut mieux trouver l’élément fautif. Sinon, vous cachez la fumée pendant que le grille-pain continue de brûler.
