How to disable scrolling the document body?_问答_开发者

How to disable scrolling the document body?

开发者 https://www.devze.com 2022-12-24 09:59 出处：网络

I have a HTML which has lot of content and a vertical scrollbar appears as soon as the HTML is loaded. Now from this HTML a full screen IFRAME is loaded. The problem is when the IFRAME is loaded, the

I have a HTML which has lot of content and a vertical scrollbar appears as soon as the HTML is loaded. Now from this HTML a full screen IFRAME is loaded. The problem is when the IFRAME is loaded, the parent scrollbar still persists, I want to disable the scrollbar when the Iframe is loaded.

I tried:

document.body.scroll = "no", it did not work with FF and chrome.
document.style.overflow = "hidden开发者_如何学JAVA"; after this I was still able to scroll, and the whole iframe would scroll up revealing the parent HTML.

My requirement is, when the IFRAME is loaded, we should never be able to scroll the entire IFRAME if the parent HTML has a scrollbar.

Any ideas?

If you want to use the iframe's scrollbar and not the parent's use this:

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

If you want to use the parent's scrollbar and not the iframe's then you need to use:

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

or set the scrolling="no" attribute in your iframe's tag: <iframe src="some_url" scrolling="no">.

with css

body, html {
  overflow: hidden
}

The following JavaScript could work:

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

To disable Scroll use:

page.classList.add('noscroll');

To enable Scroll use:

page.classList.remove('noscroll');

In the CSS file, add:

.noscroll {
    position: fixed!important
}

add this css

body.disable-scroll {
    overflow: hidden;
}

and when to disable run this code

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

and when to enabled run this code

$("body").removeClass("disable-scroll")

I know this is an ancient question, but I just thought that I'd weigh in.

I'm using disableScroll. Simple and it works like in a dream.

I have had some trouble disabling scroll on body, but allowing it on child elements (like a modal or a sidebar). It looks like that something can be done using disableScroll.on([element], [options]);, but I haven't gotten that to work just yet.

The reason that this is prefered compared to overflow: hidden; on body is that the overflow-hidden can get nasty, since some things might add overflow: hidden; like this:

... This is good for preloaders and such, since that is rendered before the CSS is finished loading.

But it gives problems, when an open navigation should add a class to the body-tag (like <body class="body__nav-open">). And then it turns into one big tug-of-war with overflow: hidden; !important and all kinds of crap.

Answer : document.body.scroll = 'no';