How to synchronize scrolling positions for several iframes

Question

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.

Answer 1

Accepted solution works only if divs have the same width. If not, it causes an infinite loop: #div1 scrolls #div2, then #div2's scroll event scrolls #div1 etc :)

Edited solution:

var skip = false;
$("#div1").scroll(function () {
    if (skip){skip=false; return;} else skip=true; 
    $("#div2").scrollTop($("#div1").scrollTop());
    $("#div2").scrollLeft($("#div1").scrollLeft());
});
$("#div2").scroll(function () { 
    $("#div1").scrollTop($("#div2").scrollTop());
    $("#div1").scrollLeft($("#div2").scrollLeft());
});