Rendre la barre de défilement principale toujours visible

html {
    overflow-y: scroll;
}

C'est ce que tu veux?

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

Les choses ont changé ces dernières années. Les réponses ci-dessus ne sont plus valables dans tous les cas. Apple poussedisparaître barres de défilement partout. Safari, Chrome et même Firefox sur MacOs (et iOs) n'affichent que les barres de défilement lors du défilement - Je ne connais pas Windows/IE actuel. Cependant, il existe des moyens non standard de styliser barres de défilement sur Webkit (c'est-à-dire abandonné il y a longtemps).

Assurez-vous que overflow est défini sur "scroll" et non sur "auto"."Cela dit, dans OS X Lion, le débordement défini sur "scroll" se comporte plus comme auto dans ce que les barres de défilement ne s'afficheront toujours que lorsqu'elles sont utilisées. Donc, si les solutions ci-dessus ne semblent pas fonctionner, c'est peut-être pourquoi.

C'est 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.

html {height: 101%;}

J'utilise Cette solution multi-navigateurs (note: j'utilise toujours la déclaration DOCTYPE en 1ère ligne, Je ne sais pas si cela fonctionne dans quirksmode, 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 sera défilable que de 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 sera défilante que de quelques pixels.

Dans le cas où vous êtes obsédé par la validation CSS (je suis obesessed uniquement avec 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 comme -moz-scrollbars-vertical

body { height:101%; } va "recadrer" des pages plus grandes.

Au lieu de cela, j'utilise:

body { min-height:101%; }

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

html { width: 100vw; }

J'ai pu faire fonctionner cela en l'ajoutant à la balise body. Était plus agréable pour moi parce que je n'ai rien sur l'élément html.

body {
    overflow-y: scroll;
}

Ajoutez ce code à votre feuille de style CSS:

html {overflow-y: scroll;}

, ce Qui est tout là est à lui !

Définir la hauteur à 101% est ma solution au problème. Vous les pages ne seront plus "flick" lors de la commutation entre ceux qui dépassent la hauteur de la fenêtre et ceux qui ne le font pas.