'Remove scrollbar from iframe

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?

htmlcssiframe


Solution 1:[1]

in your css:

iframe{
    overflow:hidden;
}

Solution 2:[2]

Add scrolling="no" attribute to the iframe.

Solution 3:[3]

This works in all browsers

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

Solution 4:[4]

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.

Solution 5:[5]

Try adding scrolling="no" attribute like below:

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

Solution 6:[6]

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

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

UPDATE:

seamless attribute has been removed in all major browsers

Solution 7:[7]

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.

Solution 8:[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.

Solution 9:[9]

Add this in your css to hide both scroll bar

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

Solution 10:[10]

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.

Solution 11:[11]

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

Solution 12:[12]

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

iframe{
    overflow-x:hidden;
}

Solution 13:[13]

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

Solution 14:[14]

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

Solution 15:[15]

When nothing works, float:left could safe you.

iframe{float:left; clear:both;}

Related Questions