Remove scrollbar from iframe

Question

Using this code

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="http://www.cbox.ws/box/?boxid=439&boxtag=7868&sec=main" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>

This is how it appears (the shoutbox on homepage of http://www.talkjesus.com)

How do I remove the horizontal scrollbar and modify the css of the vertical scrollbar?

duplicate with http://stackoverflow.com/questions/4856746/hide-horizontal-scrollbar-on-an-iframe which has a better answer — Daniël Tulp, Oct 21 '14 at 10:42

score 417 · Answer 1 · edited Jul 16 '14 at 09:58

417

Add scrolling="no" attribute to the iframe.

edited Jul 16 '14 at 09:58

franzlorenzon

5,509
6
33
56

answered Jan 20 '14 at 02:04

Dean Oakley

4,975
2
16
12

1

able to do this with css? – Evorlor Apr 07 '15 at 16:34
1

Yes, but then in Chrome can't use scrollIntoView. See https://code.google.com/p/chromium/issues/detail?id=137214 – Peter Brand Jun 09 '15 at 12:30
1

well, this hides the content's scrollbar, and prevents scrolling the content. it doesn't prevent the iframe's scrollbar from appearing. – Dave Cousineau Jun 22 '15 at 01:44
4

The scrolling attribute on the iframe is now officially obsolete. CSS should be used instead. – Mike Poole Nov 30 '17 at 18:12
6

@MikePoole It might be officially obsolete, but it didn't help setting `overflow:hidden;`on Chrome 65.0.3325.181, but `scrolling="no"` helped. – some Mar 30 '18 at 07:59
actually, this should be the accepted answer.... as a iframe property.... it works. – Pablo Contreras Jan 20 '21 at 03:58
2

This removed the scroll bar for me, but [W3C Nu Html Checker](https://validator.w3.org/nu/) now reports `The scrolling attribute on the iframe element is obsolete.` – Keyslinger Apr 02 '21 at 00:35

Thyagarajan C · Answer 2 · 2021-03-25T05:08:25.183

49

This works in all browsers

<iframe src="http://buythecity.com"  scrolling="no" style=" width: 550px; height: 500px;  overflow: hidden;" ></iframe>

edited Mar 25 '21 at 05:08

answered Feb 24 '16 at 05:09

Thyagarajan C

7,376
1
19
24

score 28 · Answer 3 · edited Jun 06 '18 at 12:19

28

Adding scroll="no" and style="overflow:hidden" on iframe didn't work, I had to add style="overflow:hidden" on body of html document loaded inside iframe.

edited Jun 06 '18 at 12:19

Mayank Pandeyz

24,624
3
35
55

answered Jul 17 '16 at 19:19

nirvana74v

981
2
16
23

1

If this helps, there is an issue in Firefox, where if you have an element CSS `transform: scale(0.7)` or such, this will create scrollbars (which will show up in your iFrame), unless you clip it with `overflow: hidden;` on an ancestor (could be a div instead of body). – WraithKenny Oct 18 '17 at 20:43
17

That's because it's 'scrolling=no', not 'scroll=no'. – Bryan Green Dec 12 '18 at 17:42
do you mean loaded inside our loaded around? What is around what? – João Pimentel Ferreira Jan 06 '19 at 21:34
loaded inside where test.html has this setting. – nirvana74v Jan 11 '19 at 14:14

score 22 · Answer 4 · edited Jun 19 '19 at 04:55

22

Try adding scrolling="no" attribute like below:

<iframe frameborder="0" scrolling="no" style="height:380px;width:6000px;border:none;" src='https://yoururl'></iframe>

edited Jun 19 '19 at 04:55

Cà phê đen

1,817
2
19
19

answered Jun 19 '19 at 04:16

Allabux B

245
2
4

score 20 · Answer 5 · edited Jun 03 '22 at 09:16

20

UPDATE:

seamless attribute has been removed in all major browsers

Just Add scrolling="no" and seamless="seamless" attributes to iframe tag. like this:-

 1. XHTML => scrolling="no"
 2. HTML5 => seamless="seamless"

edited Jun 03 '22 at 09:16

Koen.

23,152
6
79
76

answered Jun 06 '16 at 16:23

Nima Rahbar

225
2
4

16

The seamless attribute has been [removed from HTML](https://github.com/whatwg/html/issues/331). – neopickaze Jul 12 '16 at 10:31
You must use css instead of seamless attribute. – Nima Rahbar Mar 05 '18 at 17:21
@NimaRahbar The seamless attribute may be obsolete, but css does not support iframe parameters. – Abandoned Cart Apr 25 '18 at 05:51

score 10 · Answer 6 · answered Oct 18 '17 at 21:00

If anyone here is having a problem with disabling scrollbars on the iframe, it could be because the iframe's content has scrollbars on elements below the html element!

Some layouts set html and body to 100% height, and use a #wrapper div with overflow: auto; (or scroll), thereby moving the scrolling to the #wrapper element.

In such a case, nothing you do will prevent the scrollbars from showing up except editing the other page's content.

score 8 · Answer 7 · edited Sep 25 '13 at 06:40

8

<div id="myInfoDiv" seamless="seamless" scrolling="no" style="width:100%; height: 100%; float: left; color: #FFF; background:#ed8719; line-height:100%; font-size:100%; font-family: sans-serif>;

Use the above div and it will not show scroll bar in any browser.

edited Sep 25 '13 at 06:40

Kamil Budziewski

21,991
13
83
101

answered Sep 25 '13 at 06:17

KnightFury

121
1
1

5

`seamless` attribute is not valid HTML5, not supported by most browsers (http://caniuse.com/#search=seamless), and most of the other styling is unnecessary. – Pere Apr 19 '16 at 15:00

score 7 · Answer 8 · edited Sep 09 '14 at 06:20

7

Add this in your css to hide both scroll bar

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}

edited Sep 09 '14 at 06:20

NorthCat

8,997
16
45
49

answered Sep 09 '14 at 05:09

Deepika Patel

2,433
2
18
12

Shaya · Answer 9 · 2021-09-20T14:17:30.070

6

It's the last resort, but worth mentioning:

You can use the ::-webkit-scrollbar pseudo-element on the iframe's parent to get rid of those famous 90's scroll bars.

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

Edit: though it's relatively supported, ::-webkit-scrollbar may not suit all browsers. use with caution :)

edited Sep 20 '21 at 14:17

answered Jun 06 '18 at 22:53

Shaya

2,624
3
24
34

3

This is the only answer that helped me. You can still scroll but you don't see the ugly scrollbar. Thank you! – Karmidzhanov Jul 09 '18 at 14:37

score 6 · Answer 10 · answered Sep 08 '19 at 21:17

iframe {
  display: block;
  border: none;         /* Reset default border */
  height: 100vh;        /* Viewport-relative units */
  width: calc(100% + 17px);
}
div {
  overflow-x: hidden;
}

Like this you make the width of the Iframe larger than it should be. Then you hide the horizontal scrollbar with overflow-x: hidden.

score 5 · Answer 11 · answered Sep 25 '13 at 06:26

5

Add this in your css to hide just the horizontal scroll bar

iframe{
    overflow-x:hidden;
}

answered Sep 25 '13 at 06:26

Abhidev

6,833
5
20
25

score 4 · Accepted Answer · answered Apr 10 '12 at 02:01

4

in your css:

iframe{
    overflow:hidden;
}

answered Apr 10 '12 at 02:01

takien

1,038
8
11

7

Thanks, but horizontal scroll only and still shows up in Firefox. Doesn't show up in Chrome nor IE. Also, CSS for scrollbar gets applied effectively only in IE, not FF nor Chrome (latter show default looking beige color/shades). – Faith In Unseen Things Apr 10 '12 at 19:46
3

This won't work because the overflow happens in the iframe document, which you generally won't be able to modify because of cross-domain iframe security restrictions. – thdoan Apr 17 '15 at 11:09
82

This doesn't work since this won't affect the content of the iframe, just the iframe itself. The solution is scrolling="no". – TheLD Aug 18 '15 at 09:22
9

This is an incorrect answer, does not remove scrollbars in google chrome, but scrolling="no" does. – Anders Lindén Jun 15 '17 at 08:34
@LarsVandeDonk Your answer should be the correct solution. – Wong Jia Hau Mar 26 '18 at 12:42
Best solution should not cut the content – Aug 16 '19 at 10:17
@TheLD Thanks mate, your solution worked perfectly, Your answer should be the perfect solution – Danial Shabbir Oct 31 '20 at 15:53
That's not a useful answer, it does not work in Chrome. – Dennis Kozevnikoff Aug 16 '21 at 14:14
1

This answer should be unaccepted. This is an incorrect answer. – Frank H. Jan 13 '22 at 16:02
Still not sure why this is an accepted answer. Does not work on older browsers and does not effect the horizontal axis – d0rf47 Mar 10 '22 at 16:50

Dennis Kozevnikoff · Answer 13 · 2022-02-28T12:33:37.190

2

None of the above answers worked for me. This is what I did in JS:

Select the iframe element:

var iframe_name = document.getElementById("iframe_name");

Add the attribute to it:

  iframe_name.scrolling = "no";

edited Feb 28 '22 at 12:33

answered Aug 16 '21 at 14:22

Dennis Kozevnikoff

1,654
3
14
24

score 0 · Answer 14 · edited Apr 17 '22 at 18:54

0

Instead of iframe:

const blob = new Blob([data], { type: "application/pdf" });
const link = document.createElement("a");
const URL = window.URL.createObjectURL(blob);
link.href = URL;
link.download = filename;
//download the pdf
link.click();
//open the downloaded pdf in its default viewer
window.open(URL);

edited Apr 17 '22 at 18:54

Tyler2P

2,182
12
17
28

answered Apr 13 '22 at 11:13

pavithra ramasamy

11
2

score -1 · Answer 15 · answered Jan 15 '22 at 02:59

-1

When nothing works, float:left could safe you.

iframe{float:left; clear:both;}

answered Jan 15 '22 at 02:59

Andrés

1
2

Remove scrollbar from iframe

15 Answers15

Linked