How to remove Iframe scrollbar but full page should load?

Question

After adding Iframe inside contentArea, I am getting two scroll bars. I wanted to hide iframe scrollbar without hiding any content of external website link. How can I do that? I added the below snippet code and tried couple of things like scrollbar="no" but didn't work. Help me on this and thank you in advance.

I need contentArea scrollbar. Just wanted to hide iframe scrollbar without hiding external website content.

body{margin:0;padding:0;}
.contentArea{height:100%; width:100%; position:absolute; top:0;left:0;overflow-y:scroll;}
iframe{height:100%; width:100%; position:absolute; top:0;left:0;border:0;}

<div class="contentArea">
<iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>

Answer 1

You need to make the size of the iframe match the size of the content in the iframe. Their is no native way of doing this in the browser, and if your doing this cross-domain then you will need JS code on both the parent and in the iframe.

Here is a much longer answer that I wrote a few years ago on how to do this.

iframe Auto Adjust Height as content changes

Alternatively their is this library that will make things a lot simpler for you.

https://github.com/davidjbradshaw/iframe-resizer

Answer 2

Try this, you will able to hide the scroll bar of iframe but you can still scroll your page

<div style='width: 500px; height: 120px; overflow: hidden;'>

    <iframe style='width: 518px; height: 120px;' src=''></iframe>

</div>