Home » Html » HTML iframe – disable scroll

HTML iframe – disable scroll

Posted by: admin November 21, 2017 Leave a comment

Questions:

I have following iframe in my site:

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe>

And it has scrolling bars.
How to get rid of them?

Answers:

Unfortunately I do not believe it’s possible in fully-conforming HTML5 with just HTML and CSS properties. Fortunately however, most browsers do still support the scrolling property (which was removed from the HTML5 specification).

overflow isn’t a solution for HTML5 as the only modern browser which wrongly supports this is Firefox.

A current solution would be to combine the two:

<iframe src="" scrolling="no"></iframe>

iframe { overflow:hidden; }

But this could be rendered obsolete as browsers update. You may want to check this for a JavaScript solution: http://www.christersvensson.com/html-tool/iframe.htm

Edit: I’ve checked and scrolling="no" will work in IE10, Chrome 25 and Opera 12.12.

Questions:
Answers:

I solved the same issue with this css:

    pointer-events:none;

Questions:
Answers:

It seems to work using

html, body { overflow: hidden; }

inside the IFrame

edit:
Of course this is only working, if you have access to the Iframe’s content (which I have in my case)

Questions:
Answers:

Set all the content to:

#yourContent{
 width:100%;
height:100%;  // in you csss
}

The thing is that the iframe scroll is set by the content NOT by the iframe by itself.

set the content to 100% in the interior with CSS and the desired for the iframe in HTML

Questions:
Answers:

Add this styles..for your iframe tag..

overflow-x:hidden;
overflow-y:hidden;

Questions:
Answers:

below html5 versions

iframe {
    overflow:hidden;
}

In html5

<iframe seamless="seamless"  ....>


iframe[seamless]{

   overflow: hidden;
}

but not supported correctly yet

Questions:
Answers:

Since the “overflow: hidden;” property does not properly work on the iFrame itself, but seems to give results when applied to the body of the page inside the iFrame, I tried this :

iframe body { overflow:hidden; }

Which surprisingly did work with Firefox, removing those annoying scrollbars.

In Safari though, a weird 2-pixels-wide transparent line has appeared on the right side of the iframe, between its contents and its border. Strange.

Questions:
Answers:

I tried scrolling=”no” in my current browser (Google Chrome Version 60.0.3112.113 (Official Build) (64-bit)) and that didn’t work. However, scroll=”no” did work. Might be worth trying

<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>

Questions:
Answers:

For this frame:

    <iframe src="" name="" id=""></iframe>

I tried this on my css code:

    iframe#put the value of id here::-webkit-scrollbar {
         display: none;
    }

Questions:
Answers:

You can use the following CSS code:

margin-top: -145px; 
margin-left: -80px;
margin-bottom: -650px;

In order to limit the view of the iframe.