web-dev-qa-db-fra.com

Comment désactiver le défilement du corps du document?

J'ai un HTML qui a beaucoup de contenu et une barre de défilement verticale apparaît dès que le HTML est chargé. Maintenant, à partir de ce HTML, un IFRAME plein écran est chargé. Le problème est que lorsque l'IFRAME est chargé, la barre de défilement parent persiste toujours, je veux désactiver la barre de défilement lorsque l'Iframe est chargé.

J'ai essayé:

  • document.body.scroll = "no", cela ne fonctionnait pas avec FF et chrome.
  • document.style.overflow = "hidden"; après cela, je pouvais toujours faire défiler, et l'ensemble de l'iframe défilerait vers le haut, révélant le code HTML parent.

Ma condition est que, lorsque l'IFRAME est chargé, nous ne devrions jamais pouvoir faire défiler l'IFRAME entier si le HTML parent a une barre de défilement.

Des idées?

javascripthtmlajaxxhtml
22
Manohar

Si vous souhaitez utiliser la barre de défilement de l'iframe et non celle du parent, utilisez ceci:

document.body.style.overflow = 'hidden';

Si vous souhaitez utiliser la barre de défilement du parent et non celle de l'iframe, vous devez utiliser:

document.getElementById('your_iframes_id').scrolling = 'no';

ou définissez le scrolling="no" attribut dans la balise de votre iframe: <iframe src="some_url" scrolling="no">.

30
ntownsend

avec css

body,html{
  overflow:hidden
}
9
Behnam Mohammadi

Le JavaScript suivant pourrait fonctionner:

var page = $doc.getElementsByTagName('body')[0];

Pour désactiver l'utilisation du défilement:

page.classList.add('noscroll');

Pour activer l'utilisation du défilement:

page.classList.remove('noscroll');

Dans le fichier CSS, ajoutez:

.noscroll {
    position: fixed!important
}
5
Ratnakar

ajouter ce css

body.disable-scroll {
    overflow: hidden;
}

et quand désactiver désactiver ce code

$("body").addClass("disable-scroll");

et quand activer ce code

$("body").removeClass("disable-scroll")
2
Behnam Mohammadi

Je sais que c'est une question ancienne, mais je pensais juste que j'allais peser.

J'utilise disableScroll . Simple et cela fonctionne comme dans un rêve.

J'ai eu du mal à désactiver le défilement sur le corps, mais à l'autoriser sur les éléments enfants (comme un modal ou une barre latérale). Il semble que quelque chose puisse être fait en utilisant disableScroll.on([element], [options]);, mais je ne l'ai pas encore fait fonctionner.

La raison pour laquelle cela est préféré par rapport à overflow: hidden; sur le corps est que le débordement-caché peut devenir méchant, car certaines choses pourraient ajouter overflow: hidden; comme ça:

... C'est bon pour les préchargeurs et autres, car cela est rendu avant le chargement du CSS.

Mais cela pose des problèmes, lorsqu'une navigation ouverte doit ajouter une classe à la balise body- (comme <body class="body__nav-open">). Et puis ça se transforme en un gros bras de fer avec overflow: hidden; !important et toutes sortes de conneries.

0
Zeth