HTML: making iframe height fixed - html

Question

I have a we page that is included inside an iframe on another domain. The issue is that the iframe is always loaded with vertical scrollbar. I checked the markup and here is how they include the iFrame:
<iframe class="plugin-frame js-plugin-frame" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="auto" sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-top-navigation" src="https://mydomain/mypage.html"></iframe>
If I change the above to:
<iframe class="plugin-frame js-plugin-frame" frameborder="0" marginheight="0" marginwidth="0" width="100%" min-height="600px" sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-top-navigation" src="https://mydomain/mypage.html"></iframe>
it works.
Is there anything that I can do on my page to make it work. I need to get rid of the vertical scrollbar and have no control over the third party markup. Is there anything needed in the markup of my iframe to fix this?

Answer 1

If you don't want to have the scrollbar, but do want to allow scrolling, you can add the following CSS (only works in WebKit):
::-webkit-scrollbar {display: none}
If you don't want to have the scrollbar and you don't want scrolling then you can do this:
body, html { overflow-y: hidden }
Since I assume you want to only apply these styles if your page is iframed, use this JavaScript to get the job done:
if (top != self) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '::-webkit-scrollbar {display: none}';
document.head.appendChild(style);
}