web-dev-qa-db-fra.com

Rendre la barre de défilement principale toujours visible

Quel CSS est requis 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 des barres de défilement)?

htmlcssxhtml
171
Deniz Dogan
html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

Cela rend la barre de défilement toujours visible et active uniquement en cas de besoin.

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

html {
    overflow-y:scroll;
}
307
Corv1nus
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 à HTML ou BODY, bien que cela fonctionne pour d'autres éléments de niveau bloc comme DIV.

24
Ionuț G. Stan

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 disparaissent partout. Safari, Chrome et même Firefox sur MacO (et iO) affichent uniquement les barres de défilement lors du défilement - je ne connais pas Windows/IE actuel. Cependant, il existe des méthodes non standard pour styler barres de défilement sur Webkit (IE a abandonné cela il y a longtemps).

23
Frank Lämmer

Assurez-vous que le débordement est défini sur "faire défiler" et non sur "auto". Ceci étant dit, sous OS X Lion, le débordement défini pour "faire défiler" se comporte davantage comme un mode automatique dans lequel les barres de défilement ne s'afficheront toujours que lorsqu'elles seront utilisées. Donc, si l'une des solutions ci-dessus ne semble pas fonctionner, c'est peut-être pour cela.

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 personnaliser en conséquence si vous n'aimez pas le paramètre par défaut.

22
molls223
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 quirksmode, je ne l'ai jamais testée ).

Ceci 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 (voir le port), vous verrez toujours la barre de défilement verticale active, qui ne fera défiler que quelques pixels.

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

12
Marco Demaio

body { height:101%; } "rogner" les pages plus grandes.

Au lieu de cela, j'utilise:

body { min-height:101%; }
12
Scott

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

html { width: 100vw; }
2
lunelson

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

body {
    overflow-y: scroll;
}
2
Jazzepi

Régler la hauteur à 101% est ma solution au problème. Vos pages ne voleront plus lorsque vous basculerez entre celles qui dépassent la hauteur de la fenêtre et celles qui ne le sont pas.

0
Sanjaal Corps

Ajoutez ce code à votre feuille de style CSS:

html {overflow-y: scroll;}

C'est tout ce qu'on peut en dire !

0
iCrazybest