HTML iframe - disable scroll

Question

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?

Herman - I think `scrolling="no"` should work.Its work for me. is it in HTML5 ? — Yagnesh Agola, Mar 19 '13 at 08:34
@Yagnesh I have post you sample of my iframe and it is not working. — Michał Herman, Mar 19 '13 at 08:37
I have tried with your code and it working fine without scroll. Pls check if iframe is under any div. — Yagnesh Agola, Mar 19 '13 at 08:44
Perhaps the inside the iframe is adding the scrollbars, and not the ? — oriadam, Jun 16 '15 at 16:27

James Donnelly · Accepted Answer · 2019-01-21T15:29:44.267

202

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.

edited Jan 21 '19 at 15:29

answered Mar 19 '13 at 08:52

James Donnelly

126,410
34
208
218

1

The scrolling attribute is not supported in HTML5. Use CSS instead. Source: http://www.w3schools.com/tags/att_iframe_scrolling.asp – Linus Apr 03 '14 at 09:48
4

@LinusAn this is what the first line of my answer states. The problem is though that browsers can't really just drop it altogether as it would break HTML4 websites, so the `scrolling` attribute is still a viable, albeit invalid option. – James Donnelly Apr 03 '14 at 09:59
This is correct, but in Chrome this breaks the scrollIntoView on elements within the iframe. See https://code.google.com/p/chromium/issues/detail?id=137214 – Peter Brand Jun 09 '15 at 12:32
@Linus - unfortunately, that shouldn't work, and any browsers in which it does work are non-conformant : overflow should not be applied to replaced elements like buttons, form elements and iframes. – Jimmy Breck-McKye Jul 09 '15 at 16:12
This cuts out content. – Feb 02 '16 at 00:47
@DaniSpringer have you provided an adequate size for the `iframe`? – James Donnelly Feb 02 '16 at 07:52
I believe so. How can I check? – Feb 02 '16 at 13:30
3

@DaniSpringer This solution is SUPPOSED to cut out content. Loading an iframe without the ability to scroll does not automatically resize the entire child page to fit into the designated iframe dimensions. – Nate Feb 08 '16 at 18:00
@Nate how can I do just that? Thanks for getting back. – Feb 10 '16 at 03:34
@DaniSpringer If what you're asking is to show an iframe shrunk down to a thumbnail, then I suggest you use CSS3 transform (http://www.w3schools.com/cssref/css3_pr_transform.asp). Working example: http://codepen.io/progidy/pen/pgqzgM – Nate Feb 10 '16 at 05:51
@Nate no. Force page height to height of frame. No scrolling. No cut off. – Feb 10 '16 at 18:46
@DaniSpringer As far as I see it, you have 3 choices for an iframe: 1) show iframe at 100% zoom, but overflow can scroll; 2) show iframe at 100% zoom but prevent scroll; 3) show iframe zoomed to fit entirely in frame. You have turned down all 3. Can you describe what you are trying to do? If you force page height to frame with no scrolling, you must cut off. If no cut off and no zoom out, then _____. – Nate Feb 10 '16 at 22:03
@Nate sorry if I was unclear. I'd like the page to stretch so the frame fits. No scroll. No cut. – Feb 10 '16 at 22:47

score 23 · Answer 2 · answered Dec 15 '14 at 09:38

23

I solved the same issue with this css:

    pointer-events:none;

answered Dec 15 '14 at 09:38

John Smith

6,105
16
58
109

10

It seems to block the physical attempt to scroll, just not the visual scrollbars... – LWC Oct 17 '15 at 20:19
11

This will prevent any mouse events firing on the iframe, including scrolling. Way too broad to be a robust solution – Tom McKenzie Sep 26 '16 at 02:20
I had to use this to prevent scrolling in an iframe that is embedded in a `foreignobject` in a SVG image (just `overflow: hidden` didn't work) – Tim Dec 25 '16 at 10:37
This does not stop scrolling via the mouse scroll wheel (in Chromium). Also I believe the OP wants to actually hide the scroll bars; you should move your answer over to https://stackoverflow.com/questions/2712034/ as I believe that this partially solves that question. – EoghanM Oct 08 '19 at 11:49
Thanks, at least the iframe scrolling is disabled. – Soerendip Nov 06 '19 at 20:14
If we disable events then it can create other issues which is not good solution – Ali Hussain Sep 05 '21 at 04:49

Alex · Answer 3 · 2016-06-14T08:22:16.993

14

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)

edited Jun 14 '16 at 08:22

answered May 20 '16 at 11:37

Alex

32,506
16
106
171

3

When using an iframe though, you usually can't access what's in it, because it's often for including content on another domain. – Tim Malone Jun 14 '16 at 06:14

score 2 · Answer 4 · answered Jun 19 '16 at 06:01

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

score 1 · Answer 5 · answered Sep 16 '17 at 13:42

1

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>

answered Sep 16 '17 at 13:42

Zach Imholte

11
2

1

actually, digging into this a bit further, I think the cause was just me changing the height="" to be longer than the actual iFrame I am trying to load. So making the height long enough to make scrolling nonsensical actually made the scroll bar go away for me. I am trying to display the entire page though, which might be different from what you're trying to achieve. – Zach Imholte Sep 16 '17 at 13:47
This feels more like a comment than an actual answer to the question. – Sep 16 '17 at 14:05
2

Thanks JDV! I'm new to StackOverflow so I tried to comment but didn't have enough reputation points or whatever it's called. So I agree, it should have been a comment. Appreciate your guidance! – Zach Imholte Sep 17 '17 at 16:25
There are ways you can contribute until you get the necessary rep. https://stackoverflow.com/help/whats-reputation – Sep 18 '17 at 15:11

score 0 · Answer 6 · answered May 27 '16 at 10:45

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.

score 0 · Answer 7 · answered Jun 28 '20 at 14:27

0

This works for me:

<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>

Note: if you need scrollbar in any other element, also add css {overflow:scroll!important;} to that element

answered Jun 28 '20 at 14:27

proseosoc

1,168
14
23

score -1 · Answer 8 · answered Mar 19 '13 at 08:27

-1

Add this styles..for your iframe tag..

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

answered Mar 19 '13 at 08:27

sasi

4,192
4
28
47

10

`Overflow` doesn't work on HTML5 iFrames. The only browser which *wrongly* supports this is Firefox. – James Donnelly Mar 19 '13 at 08:40
1

@JamesDonnelly Actually he didnt specified it is html5, thats why we used overflow – sasi Mar 19 '13 at 08:42

score -1 · Answer 9 · edited Aug 31 '19 at 00:12

Just add an iframe styled like either option below. I hope this solves the problem.

1st option:

<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

2nd option:

<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>

score -2 · Answer 10 · answered Mar 17 '16 at 02:25

-2

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;
    }

answered Mar 17 '16 at 02:25

Lucas Santos

1

score -3 · Answer 11 · edited May 26 '20 at 22:50

-3

below html5 versions

iframe {
    overflow:hidden;
}

In html5

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


iframe[seamless]{

   overflow: hidden;
}

but not supported correctly yet

edited May 26 '20 at 22:50

MrWhite

43,179
8
60
84

answered Mar 19 '13 at 09:00

Prashobh

9,216
15
61
91

3

As per [this](http://caniuse.com/#feat=iframe-seamless) and [this](https://github.com/whatwg/html/issues/331), the `seamless` attribute has been removed from the spec. – Tim Malone Jun 14 '16 at 06:12

HTML iframe - disable scroll

11 Answers11

Linked

Related