Désactiver le défilement sur le corps

138

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

overflow: hidden; (ne fonctionne pas, n'a pas désactivé le défilement, il a juste caché la barre de défilement)
position: fixed; (cela a fonctionné, mais il a défilé complètement vers le haut, ce qui est inacceptable pour cette application spécifique)

Je n'ai pas pu trouver d'alternatives à ces deux options, y en a-t-il plus?

html css scroll

— Micha Wiedenmann
source

3

pour quel élément avez-vous appliqué overflow: hidden?

— Sajad Karuthedath

Qu'essayez-vous de réaliser exactement ici? Quel est votre objectif final?

— jbutler483

2

L'affichage du code pertinent vous aidera plus facilement.

— Sleek Geek

1

débordement caché; est la voie à suivre. Si cela ne fonctionne pas, vous avez un autre problème dans votre css. Essayez html, body {overflow: hidden;} si cela ne fonctionne pas, essayez * {overflow: hidden;} et essayez de comprendre ce qui ne va pas

— Jonas Grumann

246

Définir heightet overflow:

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

http://jsfiddle.net/q99hvawt/

— panthère
source

3

j'ai oublié le corps "html," avant ".

2

Ne fonctionne pas sur iOS lorsque vous avez un élément de superposition qui a une position fixe.

— notQ

1

Vous pouvez simplement ajouter le "débordement": "caché" et cela fonctionnera très bien.

— JPG

Cette solution n'a pas fonctionné immédiatement pour moi, mais après l'inspection, la «marge» était annulée quelque part. Définition de la "marge: 0;" de cet élément a fait l'affaire.

— joaoprib

19

HTML css fonctionne bien si la balise body ne fait rien, vous pouvez également écrire

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

Dans ce cas, le remplacement devrait être sur l'étiquette du corps, il est plus facile à contrôler mais donne parfois des maux de tête.

— Lalo
source

21

Ce n'est pas valide HTML5

— mbomb007

@ mbomb007 Pouvez-vous s'il vous plaît commenter l'erreur ici liée à HTML5?

— Ethan le

5

@Ethan L' scrollattribut n'est pas valide sur la <body>balise. Il n'est répertorié comme valide sur aucune spécification que je peux trouver. w3schools ; MDN ; Quackit

— mbomb007

14

Ce message était utile, mais je voulais juste partager une légère alternative qui pourrait aider les autres:

Le réglage max-heightau lieu de fait heightégalement l'affaire. Dans mon cas, je désactive le défilement basé sur une bascule de classe. Définir le .someContainer {height: 100%; overflow: hidden;}moment où la hauteur du conteneur est inférieure à celle de la fenêtre étirerait le conteneur, ce qui ne serait pas ce que vous voudriez. La configuration en max-heighttient compte, mais si la hauteur du conteneur est supérieure à celle de la fenêtre lorsque le contenu change, désactive toujours le défilement.

— Joebjoe
source

cela a sauvé ma journée pour les navigateurs de bureau sans effet secondaire indésirable de scroll-top-top. mais ne fonctionnait pas sur les navigateurs mobiles (iphone5s et android).

— bob

5

Pour ce faire, ajoutez 2 propriétés CSS sur l' <body>élément.

body {
   height: 100%;
   overflow-y: hidden;
}

De nos jours, il existe de nombreux sites Web d'actualités qui obligent les utilisateurs à créer un compte. En règle générale, ils donnent un accès complet à la page pendant environ une seconde, puis ils affichent une fenêtre contextuelle et empêchent les utilisateurs de faire défiler vers le bas.

— bvdb
source

cela masque la barre de défilement. Cependant, la question demande spécifiquement une alternative au masquage de la barre de défilement

— DataGeek

@DataGeek, cela ne masque pas seulement la barre de défilement, cela arrête également la possibilité de faire défiler vers le bas. Et si je comprends bien, c'est ce qui a été demandé. c'est-à-dire non seulement en le cachant, mais en rendant également impossible le défilement vers le bas.

— bvdb