Synchronize scroll of 3 iframes

JavaScript
1

Hey everyone,

So i’m trying to build a display for 3 pdf files that are embedded onto a page with iframes. The functionality I’m trying to build is to have the scroll bar synchronized, in other words as the user scrolls one iframe the other two should scroll as well at a respective rate. One iFrame is twice the height of the other two which are stacked next to it. So that frame should scroll at twice the rate of the two smaller ones which should scroll at half the rate of the large one.

Here is the HTML:

<iframe id='ifr1' width='400' height='600' src='""'></iframe>
	<iframe id='ifr2' class='trans' width='400' height='300' src=''></iframe>
       <iframe id='ifr3' class='trans' width='400' height='300' src=''></iframe>

I’m using jQuery this what I’ve tried so far for just two iframes:


$(document).ready(function() {
	
	$("#ifr1").contents().scroll(function() {
    	$("#ifr2").contents().scrollTop($("#ifr1").contents().scrollTop());
	});
	$("#ifr2").contents().scroll(function() {
	    $("#ifr1").contents().scrollTop($("#ifr2").contents().scrollTop());
	});

});

Thanks!