I tried scrolling="no" in my current browser (Google Chrome Version 60.0.3112.113 (Official Build) (64-bit)) and that didn't work. However, scroll="no" did work. Might be worth trying
<iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scroll="no" style="overflow: hidden"></iframe>
Just add an iframe styled like either option below. I hope this solves the problem.
1st option:
<iframe src="https://www.skyhub.ca/featured-listing" style="position: absolute; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>
2nd option:
<iframe src="https://www.skyhub.ca/featured-listing" style="display: none;" onload="this.style.display='block';" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="400px" width="1200px" allowfullscreen></iframe>
It seems to work using
html, body { overflow: hidden; }
inside the IFrame
edit: Of course this is only working, if you have access to the Iframe's content (which I have in my case)
You can use the following CSS code:
margin-top: -145px;
margin-left: -80px;
margin-bottom: -650px;
In order to limit the view of the iframe.
I solved the same issue with this css:
pointer-events:none;
below html5 versions
iframe {
overflow:hidden;
}
In html5
<iframe seamless="seamless" ....>
iframe[seamless]{
overflow: hidden;
}
but not supported correctly yet
For this frame:
<iframe src="" name="" id=""></iframe>
I tried this on my css code:
iframe#put the value of id here::-webkit-scrollbar {
display: none;
}
Add this styles..for your iframe tag..
overflow-x:hidden;
overflow-y:hidden;
Set all the content to:
#yourContent{
width:100%;
height:100%; // in you csss
}
The thing is that the iframe scroll is set by the content NOT by the iframe by itself.
set the content to 100% in the interior with CSS and the desired for the iframe in HTML
This works for me:
<style>
*{overflow:hidden!important;}
html{overflow:scroll!important;}
</style>
Note: if you need scrollbar in any other element, also add css {overflow:scroll!important;}
to that element
Since the "overflow: hidden;" property does not properly work on the iFrame itself, but seems to give results when applied to the body of the page inside the iFrame, I tried this :
iframe body { overflow:hidden; }
Which surprisingly did work with Firefox, removing those annoying scrollbars.
In Safari though, a weird 2-pixels-wide transparent line has appeared on the right side of the iframe, between its contents and its border. Strange.
Source: Stackoverflow.com