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
la 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
la 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
la 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
la 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
la 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

Désactiver le défilement sur le corps

Réponses: