How to disable scrolling the document body?

Question

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"; 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?

Answer 1

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">.

Answer 2

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
}

Answer 3

with css

body,html{
  overflow:hidden
}

Answer 4

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

Answer 5

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")