Remove Scrollbar from Iframe

Remove Scrollbar from Iframe

Using this code

<iframe frameborder="0" style="height: 185px; overflow:scroll; width: 100%" src="" 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 )

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

1

15 Answers

Add scrolling="no" attribute to the iframe.

7

This works in all browsers

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

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.

4

Try adding scrolling="no" attribute like below:

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

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

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.

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

1

Add this in your css to hide both scroll bar

iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
}
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.

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 :)

1

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

iframe{
    overflow-x:hidden;
}

in your css:

iframe{
    overflow:hidden;
}
10

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

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

When nothing works, float:left could safe you.

iframe{float:left; clear:both;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

James H. Sterling
Author

James H. Sterling

James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.