Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable scrolling the document body?

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?

like image 519
Manohar Avatar asked Mar 18 '10 11:03

Manohar


People also ask

How do I stop a scroll event?

We can't prevent scrolling by using event. preventDefault() in onscroll listener, because it triggers after the scroll has already happened. But we can prevent scrolling by event. preventDefault() on an event that causes the scroll, for instance keydown event for pageUp and pageDown .


2 Answers

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

like image 198
ntownsend Avatar answered Sep 30 '22 20:09

ntownsend


with css

body, html {   overflow: hidden } 
like image 22
Behnam Mohammadi Avatar answered Sep 30 '22 22:09

Behnam Mohammadi