Using javascript to scroll iFrame up and down

Question

Hi,

Is it possible to scroll the iframe window from the parent window using keys or javascript? The iframe content is from another domain different from the parent window.

KM

Answer 1

Since the iframe content is from another domain, you will not be able to alter it's DOM due to security reasons.

Although you can scroll it by using the arrow keys, when you have it activated. At least it works for me in Chrome and Firefox.

If you want to be able to scroll it from javascript, I would suggest the following approach. (it assumes you know the width and height of the iframe content and your iframe). Basically let a div in your DOM take care of scrolling.

<a href="#" id="scroll">Scroll to (400,400)!</a><br />

<div id="google" style="width: 300px; height: 200px; overflow: auto;">
   <iframe width="800" height="600" src="http://www.google.com/" scrolling="no">
   </iframe>
</div>

<script type="text/javascript">
$("#scroll").click(function()
{
  $("#google").scrollTop(400).scrollLeft(400);
  return false;
});
</script>

For smoother scrolling of the div you could try the code from this article.