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 453 · Answer 1 · edited Jul 16 '14 at 09:58

453

Add scrolling="no" attribute to the iframe.

edited Jul 16 '14 at 09:58

franzlorenzon

5,845
6
36
58

answered Jan 20 '14 at 02:04

Dean Oakley

5,366
2
18
14

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
8

@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
6

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

54

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,915
1
21
25

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

30

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

25,704
4
40
59

answered Jul 17 '16 at 19:19

nirvana74v

1,021
2
15
29

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
21

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 03 '22 at 09:16

22

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.

25,449
7
83
78

answered Jun 06 '16 at 16:23

Nima Rahbar

245
2
4

21

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 22 · Answer 5 · 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,883
2
21
20

answered Jun 19 '19 at 04:16

Allabux B

245
2
4

score 11 · 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 7 · Answer 7 · answered Jun 18 '22 at 05:38

7

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

answered Jun 18 '22 at 05:38

Jakub Bujak

79
1
2

Welcome to Stack Overflow! Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the [help center](https://stackoverflow.com/help/how-to-answer). – Ethan Jun 19 '22 at 20:46

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

6

<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

22,699
14
85
105

answered Sep 25 '13 at 06:17

KnightFury

109
1
1

7

`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

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,792
3
26
35

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 · edited Sep 09 '14 at 06:20

5

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

9,643
16
47
50

answered Sep 09 '14 at 05:09

Deepika Patel

2,581
2
19
13

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,056
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
84

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
10

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

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

4

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

iframe{
    overflow-x:hidden;
}

answered Sep 25 '13 at 06:26

Abhidev

7,063
6
21
26

Dennis Kozevnikoff · Answer 14 · 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

2,078
3
19
29

score 0 · Answer 15 · 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,324
26
22
31

answered Apr 13 '22 at 11:13

pavithra ramasamy

11
2

score -1 · Answer 16 · answered Jan 27 '23 at 01:02

Using negative margin and overflow hidden to hide the scrollbar

<div class="scrollbar-hider" style="overflow:hidden">
        <div class="scrollbar-hider-margin" style="margin-right: -17px;">
            <iframe src="" 
                    style="display: block; 
                           overflow: hidden scroll; 
                           height:calc(100vh - 65px); 
                           width: 100%" 
                    frameborder="0" loading="lazy">
             </iframe>
        </div>
</div>

michael fecarotta · Answer 17 · 2023-02-27T14:49:27.507

seamless="seamless" scrolling="no"

are the two attributes that are used to remove the scroll bar and the faint line that borders the iframe.

You can combine this with other size restraining attributes to embed a page into another without it looking like you did. This helps to recreate data that you would normally have to recode and take up space on your server.

Finally, including anchors such as <href will allow you to direct the iframe to a specific portion of the page. You must of coarse create a call label on that page directed to the object.

Have fun!!!! :)

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

-2

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

18 Answers18

Linked