web-dev-qa-db-fra.com

Désactiver le défilement sur le corps

Je voudrais désactiver le défilement sur le code HTML body complètement. J'ai essayé les options suivantes:

  • overflow: hidden; (ne fonctionne pas, n'a pas désactivé le défilement, il a juste masqué la barre de défilement)

  • position: fixed; (cela a fonctionné, mais cela a complètement défilé, ce qui est inacceptable pour cette application spécifique)

Je ne pouvais pas trouver d'alternative à ces deux options, y en a-t-il d'autres?

htmlcssscroll
94
user4532193

Définissez height et overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

182
panther

HTML css fonctionne bien si la balise body ne fait rien que vous puissiez écrire également

<body scroll="no" style="overflow: hidden">

Dans ce cas, la balise body devrait être prioritaire, il est plus facile à contrôler mais donne parfois des maux de tête.

15
Lalo

Cet article a été utile, mais je voulais juste partager une légère alternative qui pourrait aider les autres:

Régler max-height au lieu de height fait également l'affaire. Dans mon cas, je désactive le défilement basé sur une bascule de classe. Si vous définissez .someContainer {height: 100%; overflow: hidden;} lorsque la hauteur du conteneur est inférieure à celle de la fenêtre d'affichage, le conteneur serait étiré, ce qui ne serait pas ce que vous souhaiteriez. Définir max-height pour cela, mais si la hauteur du conteneur est supérieure à celle de la fenêtre lorsque le contenu est modifié, le défilement reste désactivé.

11
joebjoe