Rendre la barre de défilement principale toujours visible

Quel CSS est nécessaire pour que la barre de défilement verticale du navigateur reste visible lorsqu'un utilisateur visite une page Web (lorsque la page n'a pas assez de contenu pour déclencher l'activation de la barre de défilement)?

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

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

Mise à jour: Si ce qui précède ne fonctionne pas, la simple utilisation peut.

html {
    overflow-y:scroll;
}

Assurez-vous que le dépassement est réglé sur «défilement» et non sur «automatique». Cela dit , dans OS X Lion, le débordement réglé sur "scroll" se comporte plus comme auto dans la mesure où les barres de défilement ne s'afficheront toujours que lorsqu'elles sont utilisées. Donc, si l'une des solutions ci-dessus ne semble pas fonctionner, c'est peut-être pourquoi.

Voici ce dont vous aurez besoin pour le réparer:

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Vous pouvez le styliser en conséquence si vous n'aimez pas la valeur par défaut.

Les choses ont changé ces dernières années. Les réponses ci-dessus ne sont plus valables dans tous les cas. Apple pousse partout des barres de défilement qui disparaissent . Safari, Chrome et même Firefox sur MacOs (et iOs) affichent uniquement les barres de défilement lors du défilement - je ne sais pas à propos de Windows / IE actuel. Cependant, il existe des moyens non standard de styliser les barres de défilement sur Webkit (IE l'a abandonné il y a longtemps).

html {
    overflow-y: scroll;
}

Est-ce que c'est ce que tu veux?

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

html {height: 101%;}

J'utilise cette solution de navigateurs croisés (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 ne pourra faire défiler que quelques pixels.

Lorsque le contenu de la page est plus court que la zone visible du navigateur (port d'affichage), vous verrez toujours la barre de défilement verticale active, et elle ne pourra faire défiler que quelques pixels.

Dans le cas où vous êtes obsédé par la validation CSS (je suis obsédé uniquement par la validation HTML) en utilisant cette solution, votre code CSS validerait également pour le W3C car vous n'utilisez pas d'attributs CSS non standard tels que -moz-scrollbars-vertical

body { height:101%; } "recadrera" de plus grandes pages.

Au lieu de cela, j'utilise:

body { min-height:101%; }

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

body {
    overflow-y: scroll;
}

Une autre approche consiste à définir la largeur de l'élément html sur 100vw. Sur de nombreux navigateurs, sinon sur la plupart, cela annule l'effet des barres de défilement sur la largeur.

html { width: 100vw; }

Mettre la hauteur à 101% est ma solution au problème. Vos pages ne «feuilleteront plus» lorsque vous basculez entre celles qui dépassent la hauteur de la fenêtre et celles qui ne le font pas.

body { 
    min-height: 101vh; 
} 

fonctionne le mieux pour moi

Je fais ça:

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

Ensuite, je n'ai pas à regarder la vilaine barre de défilement grisée lorsqu'elle n'est pas nécessaire.