How to integrate site and iframe scroll bar?

Question

I've been trying to integrate my site scrollbars with an iframe, it is, I need to include an iframe in my page, but I need to show only one scrollbar. You can see an example here: http://jsfiddle.net/SQXUC/2/

My goal is to have only the outer scrollbar in this example, it is, scroll the iframe site as part of my own page. I've found some StackOverflow questions that help me understand how it works, but after a lot of tests I can't found any way to do it. Both jquery/javascript and CSS solutions are valid for me.

Yes, my goal is to have only my page scrollbar, no external site scrollbar. This is the same as say I don't want the user needs to scroll the iframe content :) — Ivan, Nov 23 '11 at 11:42

score 1 · Accepted Answer · edited May 23 '17 at 10:34

A possible solution in javascript:

<script type="text/javascript"> 

moz=document.getElementById&&!document.all 
mozHeightOffset=20 

function resize_iframe(){ 
document.getElementById("sizeframe").height=100 // required for Moz bug, value can be "", null, or integer 
document.getElementById('iframe_id').height=window.frames["iframe_name"].document.body.scrollHeight+(moz?mozHeightOffset:0) 
} 
</script>

HTML:

<iframe width=300 id="sizeframe" name="sizeframe" src="" scrolling="no" frameborder="yes" onload=resize_iframe()></iframe>

Edit: I found this question: Making an iframe take vertical space that has a simpler solution:

<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>

"You may want to add scrolling="no" to your IFRAME to turn off the scrollbars."

How to integrate site and iframe scroll bar?

1 Answers1