Html Iframe - Disable Scroll

HTML iframe - disable scroll

Unfortunately I do not believe it's possible in fully-conforming HTML5 with just HTML and CSS properties. Fortunately however, most browsers do still support the scrolling property (which was removed from the HTML5 specification).

overflow isn't a solution for HTML5 as the only modern browser which wrongly supports this is Firefox.

A current solution would be to combine the two:

<iframe src="" scrolling="no"></iframe>

iframe {
  overflow: hidden;
}

But this could be rendered obsolete as browsers update. You may want to check this for a JavaScript solution: http://www.christersvensson.com/html-tool/iframe.htm

Edit: I've checked and scrolling="no" will work in IE10, Chrome 25 and Opera 12.12.

Disabling/Hiding iframe Scroll bar?

There are many ways for this.

add scrolling="no" in the iframe tag and style="border:0;"

<figure><iframe width="1350" height="120" scrolling="no" style="border:0;" src="//laut.fm/widgets/player_for/radio-am-bad-2?player%5Bstations%5D=radio-am-bad-2&player%5Bcolor%5D%5Bcolor%5D=white&player%5Bshadow%5D=false&player%5Bdisplay%5D%5Bborder%5D%5Bradius%5D=60px&player%5Bcolor%5D%5Bbackground_to%5D=%23ff00ff&player%5Bcolor%5D%5Bbackground_from%5D=%2300ff84&player%5Bborder%5D%5Bcolor%5D=%23cccccc&player%5Bborder%5D%5Bwidth%5D=0px&player%5Bbutton%5D%5Bcolor%5D%5Bbackground_to%5D=%23000000&player%5Bbutton%5D%5Bcolor%5D%5Bbackground_from%5D=%23000000&player%5Bbutton%5D%5Bborder%5D%5Bcolor%5D=%23333333&player%5Bbutton%5D%5Bborder%5D%5Bw[enter image description here][1]idth%5D=2px"></iframe></figure>

Remove scrollbar from iframe

in your css:

iframe{
    overflow:hidden;
}

Disable scroll in Iframe

in your css:

iframe{
    overflow:hidden;
}

set iframe as :

<iframe src="http://bing.com" class="foo" scrolling="no" seamless="seamless"></iframe>

scrolling="no"

seamless="seamless"

disable scroll on iframe until clicked on?

If your iframe is a fixed size, follow it immediately with a clickable link that fits the size of the iframe, but doesn't contain anything. Give it a negative top margin, so it moves up over top of the iframe. Then hide it once it's been clicked upon.

HTML:

<a id='clearBox' href='javascript:removeClearBox()'> </a>

Javascript:

function removeClearBox() {
    $('#clearBox').addClass('hidden');
}

CSS:

#clearBox {
    width: [iframe width]px;
    height: [iframe height]px;
    display: block;
    margin-top: -[iframe height]px;
    text-decoration: none;
}

/*in case you don't have a .hidden class:*/
.hidden { display: none; }

You may also need to play with z-index, depending on what's in the iframe, but that's easy enough to figure out.

Your stylings may vary, and it may also be possible to use dynamic sizing with more javascript.

How to remove scrolling iframe. Tried known solutions

It seems that the scroll isn't on the iframe, it is on the body of the iframe. I was playing around with the Google Developer tools, and found that if you add overflow: hidden; to your iframe, it doesn't work. You'll have to go to the page that is being represented in the iframe and add this style to the body of that page:

body {
  overflow: hidden;
  /* Other code */
}

Html Iframe - Disable Scroll