Remove Scrollbar from Iframe

Remove scrollbar from iframe

in your css:

iframe{
    overflow:hidden;
}

Hide scrollbar in iframe, while still scrolling

scrolling="no"

and

display:none

Will stop the iFrame from scrolling. The only other solution is to "hide" the scrollbar via overlapping.

<div style="width: 400px; overflow: hidden">
  <iframe src="https://fr.wikipedia.org/wiki/Main_Page" width="407"height="480">
</div>

Note the 7 pixel difference between the parent div and the iframe, this effectively cuts off a portion of the iframe so that the scrollbar is hidden but you are still able to scroll.

How to remove scrolling from iframe (have tried overflow: hidden and scrolling: no)?

This was due to something in wordpress or the shapely-template - I noticed how after saving, it always removed the scrolling-attribute from the iframe-tag, although it always was there when I copied it in or edited it before saving.

So had to retreat to custom HTML-widget in the end of the document, with a timeouted function that added the attribute "scrolling: no" to all iframes after the page is rendered. A really flimsy workaround, so might go into changing the template and trying another one. Also to see if it's a wordpress thing.

setTimeout(function(){

var epis = document.getElementsByTagName("iframe")
for (var i = 0; i < epis.length; i++){epis[i].setAttribute("scrolling", "no")}

}, 2000)

How to remove iframe's scrollbars?

CSS

iframe {
   overflow: hidden;
}

And/or use Coin_op's answer, it seems to be better.

---

Related Topics