• Accueil
• Tests
• 09

Toujours afficher la barre de défilement principale

Dernière mise à jour le 16 février 2009

Pour démonstration: Même structure que la page actuelle, sans le contenu.

Décalage visuel lors de l’apparition ou disparition de la barre de défilement

Avec la majorité des navigateurs web, la fenêtre du navigateur n'a pas de barre de défilement vertical visible si le contenu de la page ne dépasse pas la hauteur de la fenêtre.

Mais si jamais le contenu augmente (affichage d'un contenu caché via Javascript, ou chargement d'une page du même site ayant un contenu plus long), une barre de défilement apparaît.

Dans de nombreux cas, cela ne pose aucun problème. Mais pour un site centré horizontalement, l'apparition de la barre de défilement provoque une diminution de la largeur totale de la fenêtre, et le site se recentre en se décalant vers la gauche, provoquant ainsi un décrochage visuel.

Faut-il corriger ce comportement?

Il y a des arguments pour et contre.

• Pour: il s’agit d’un problème esthétique, et aussi d’un problème ergonomique, car le mouvement de la page lors du décalage peut détourner l’attention du visiteur du véritable changement intervenu (le changement de contenu), voire le surprendre inutilement.
• Contre: ceci dit, ce comportement observé avec certains navigateurs est parfaitement normal, et n’est généralement pas ressenti comme une gêne par les utilisateurs de ces navigateurs. Les problèmes soulevés dans le point précédent sont donc à relativiser. De plus, tout concepteur de site web devrait réfléchir longuement avant de modifier un comportement normal du navigateur pour lui substituer un comportement anormal ou peu courant.

Dans l’ensemble, je conseille plutôt d’oublier ce problème qui ne choque en général que les concepteurs de site web (pour leurs propres sites, pas ceux des autres où ils ne remarquent pas ce problème).

Je donne malgré tout une solution ci-dessous. À vous de voir si vous souhaitez l’utiliser.

Une solution

On peut utiliser la propriété CSS overflow, appliquée à la page entière, c'est à dire à l'élément html:

html {overflow: scroll;}

Celle-ci fera apparaître dans le navigateur une barre de défilement vertical ainsi qu'une barre de défilement horizontal. Si celles-ci sont «inutiles» (contenu ne dépassant pas la hauteur ou la largeur de la fenêtre), ces barres seront grisées, et relativement discrètes.

Cependant, la barre de défilement horizontal, même grisée, est inutile dans le cas qui nous occupe. De plus, elle peut surprendre l'utilisateur, qui a l'habitude des barres de défilement verticales, mais assez peu des horizontales. On essaiera donc de l'éviter.

Donc plutôt que d’utiliser overflow, on va cibler uniquement le défilement vertical, grâce à la propriété CSS3 overflow-y.

html {overflow-y: scroll;}

Compatibilité avec les navigateurs

Note: non testé avec Safari 3.0, Safari 3.1, Opera 9.0, Opera 9.5.

Notes sur overflow-y

1. overflow-y est une propriété introduite comme extension propriétaire par Internet Explorer 5;
2. elle est reprise dans les brouillons de CSS3;
3. elle est aujourd’hui implémentée par tous les principaux navigateurs, au moins dans leurs versions les plus récentes.

Si on devait se montrer prudent il y a quelques années (une partie des navigateurs d’alors n’implémentaient pas ces propriétés), il est aujourd’hui possible d’utiliser overflow-y et overflow-x sans grande crainte.