Is there a way to prevent double scrolling bars using iframe

This question appears to be a duplicate that was unanswered or similar to HTML iframe – Double Scrolling Bars.

I would like to know how to remove the scrolling bar of the iframe and use the browser’s scrolling bar to navigate the page up and down?

<html>
    <body style="margin: 0; padding: 0; border: 0; outline: 0;">
        <div style="width:100%;height:50px; background-color:red;"></div>
        <iframe frameBorder="0" style="width:100%;height:100%;" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn"></iframe>
    </body>
</html>

JavaScript
​x
 
<html>
    <body style="margin: 0; padding: 0; border: 0; outline: 0;">
        <div style="width:100%;height:50px; background-color:red;"></div>
        <iframe frameBorder="0" style="width:100%;height:100%;" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn"></iframe>
    </body>
</html>

Answer

You can try scrolling="no" for iframe

iframe { overflow:hidden;}

JavaScript
 
iframe { overflow:hidden;}
​

HTML:

<iframe frameBorder="0" style="width:100%;height:100%;" scrolling="no" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn"> 
  </iframe>

JavaScript
 
<iframe frameBorder="0" style="width:100%;height:100%;" scrolling="no" src="http://www.mynewplace.com/apartments-for-rent/st-paul-mn"> 
  </iframe>
​

Advertisement

Answer