How to disable scrolling the document body?

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

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

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
}

with css

body, html {
  overflow: hidden
}

Related