How to Scroll a Frame with JavaScript

Save

The "scrollTo" and "scrollBy" JavaScript methods allow you to scroll a Web page programmatically. By referencing your way upward in the DOM tree, you can access other frames from JavaScript code inside a frame. The "scrollTo" and "scrollBy" methods can then be used on the other frame to scroll its content, as long as that page resides on the same domain as the one executing the JavaScript (this is due to security policies set by Web browsers).

  • Give the frame you'd like to scroll a "name" attribute in the parent HTML document (the page containing the "frameset" code). For example, type the following code:

    <frame src="index2.html" name="scrollableFrame">

  • Add the following code between the "head" tags of the HTML document that will scroll the other frame:

    <script type="text/javascript">

    function scrollFrame(frame,amount) {

    parent.frames[frame].scrollBy(0,amount);

    }

    </script>

    The "scrollBy" method takes two arguments, corresponding to the horizontal and vertical amounts by which to scroll the page. This code simply scrolls the page vertically. The "scrollTo" method takes the same two arguments but scrolls to the absolute position specified, instead of offsetting the current scroll position.

  • Add a button in the body of the HTML document with the "scrollFrame" function to test it out:

    <input type="button" value="Scroll Other Frame" onClick="scrollFrame('scrollableFrame',100);" />

  • Save all of the pages to your Web server, and then navigate to the parent page in your Web browser. Click the button to scroll the page in the specified frame. Click it repeatedly to scroll the page further. Make sure the page you are trying to scroll is large enough that it has a scroll bar, or the function will have no visible effect.

Promoted By Zergnet

Comments

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!