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?

Thank you.

回答1:

in your css:

iframe{
    overflow:hidden;
}

回答2:

Add scrolling="no" attribute to the iframe.

回答3:

This works in all browsers. jsfiddle here http://jsfiddle.net/zvhysct7/1/

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

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

回答5:

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

回答6:

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

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

回答7:

Add this in your css to hide both scroll bar

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

回答8:

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.

回答9:

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

iframe{
    overflow-x:hidden;
}

回答10:

This is a 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 :)