Rendre la barre de défilement principale toujours visible

Question

Quel CSS est nécessaire pour maintenir la barre de défilement verticale du navigateur visible lorsque l'utilisateur visite une page web (lorsque la page n'a pas suffisamment de contenu pour déclencher l'activation de la barre de défilement) ?

Answer 1

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

Cela rend la barre de défilement toujours visible et active uniquement lorsque nécessaire.

Mise à jour: Si ce qui précède ne fonctionne pas, vous pouvez simplement utiliser ceci à la place.

html {
    overflow-y:scroll;
}

Answer 2

Les choses ont changé ces dernières années. Les réponses ci-dessus ne sont plus valables dans tous les cas. Apple pousse les barres de défilement disparues partout. Safari, Chrome et même Firefox sur MacOs (et iOs) n'affichent les barres de défilement que lorsqu'on fait réellement défiler la page - je ne sais pas pour Windows/IE actuel. Cependant, il existe des façons non standard de styliser les barres de défilement sur Webkit (IE a abandonné cela il y a longtemps).

Answer 3

html {
    overflow-y: scroll;
}

Est-ce ce que tu veux?

Malheureusement, Opera 9.64 semble ignorer cette déclaration CSS lorsqu'elle est appliquée à HTML ou BODY, bien qu'elle fonctionne pour d'autres éléments de niveau bloc comme DIV.

Answer 4

html {height: 101%;}

J'utilise cette solution compatible avec tous les navigateurs (note : j'utilise toujours la déclaration DOCTYPE en 1ère ligne, je ne sais pas si cela fonctionne en mode quirks, je ne l'ai jamais testé).

Cela affichera toujours une barre de défilement verticale ACTIVE dans chaque page, la barre de défilement verticale sera scrollable seulement de quelques pixels.

Lorsque le contenu de la page est plus court que la zone visible du navigateur, vous verrez quand même la barre de défilement verticale active, et elle sera scrollable seulement de quelques pixels.

Si vous êtes obsédé par la validation CSS (je suis obsédé uniquement par la validation HTML), en utilisant cette solution votre code CSS sera également valide pour W3C car vous n'utilisez pas d'attributs CSS non standards comme -moz-scrollbars-vertical

Answer 5

J'ai pu faire fonctionner cela en l'ajoutant à la balise body. C'était plus pratique pour moi car je n'ai rien sur l'élément html.

body {
    overflow-y: scroll;
}