Toujours afficher la barre de défilement principale

Liens pour comparaison

Même structure que la page actuelle, mais avec moins de contenu

Le problème

Avec certains navigateurs, la fenêtre du navigateur n'a pas de barre de défilement vertical 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.

Il s'agit d'un problème esthétique, mais aussi d'un problème d'ergonomie : 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.

La 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. Pour cela, on va utiliser la propriété CSS overflow-y :

html {overflow-y: scroll;}

Oui mais :

  1. overflow-y est une propriété non standard introduite par Internet Explorer 5 ;
  2. elle n'est pas gérée par de nombreux navigateurs ;
  3. elle est mentionnée (ainsi que overflow-x par les working drafts (brouillons) de CSS3… donc ça vient, mais ça n'est pas pour demain.

Cependant, l'usage que nous voulons en faire étant d'ordre "cosmétique", je ne vois pas d'obstacle majeur à son utilisation, du moins avec la valeur scroll.

Pour mémoire, il existe une propriété spécifique à Mozilla (Firefox & co) qui permet d'obtenir un effet similaire pour les versions qui n'intègrent pas la propriété overflow-y :

overflow: -moz-scrollbars-vertical;

Attention : une barre de défilement apparaît systématiquement, mais pour une page ne dépassant pas la hauteur de la fenêtre cette barre de défilement ne sera pas grisée. L'effet n'est donc pas exactement le même !

Cette propriété spécifique à Mozilla n'est pas utilisée dans la page actuelle.