Home/ Questions/Q 180337
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T14:34:07+00:00

I have an HTML layout based on tabs (say 5). In each tab I

  • 0

I have an HTML layout based on tabs (say 5). In each tab I load an iframe. The iframe contents are variations of one another that the user can compare by switching tabs.

How can I, in javascript, synchronize the scrolling of all iframes vertically and horizontally? In other words, scrolling in one iframe should scroll by the same amount all other iframes, allowing the user to compare the same data.

Bonus points: iframe content is loaded only when the user opens the tab for the first time. So newly opened iframes should directly scroll to the same place as already opened iframes.

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. While this works for divs, it does not work for iframes.

    Here’s what you can do, 

    $($('#iframe1').contents()).scroll(function(){     $($('#iframe2').contents()).scrollTop($(this).scrollTop()); });

    With jQuery’s scroll event, you should be able to synchronize them.

    Edit: No plugins required. Here’s the code that worked for me:

    <html> <head> <SCRIPT language='javascript' type='text/javascript' src='jquery-1.3.2.js'></SCRIPT> <SCRIPT> $(document).ready(function() { $('#div1').scroll(function () {          $('#div2').scrollTop($('#div1').scrollTop());         $('#div2').scrollLeft($('#div1').scrollLeft());     }); $('#div2').scroll(function () {          $('#div1').scrollTop($('#div2').scrollTop());         $('#div1').scrollLeft($('#div2').scrollLeft());     });  });  </SCRIPT> </head> <body> <div id='div1' style='overflow:auto;height:100px;width:200px;border:1px solid black;'> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> </div>  <div id='div2' style='overflow:auto;height:100px;width:200px;border:1px solid black;'> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> Test..................................................................................................................................................................................................................................................................................test <BR/><BR/> </div>  </body> </html>
    • 0