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.

Answer 1

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.”