Javascript scroll issue

I have a page with 3 different frames which form a complete grid ..

So say frame 1 has columns for Sr. Nos i.e. 1,2,3,4...frame 2 has corresponding columns for A,B,C,D, etc and frame 3 has a grid with multiple row/cols aligned with the 2 other iframe columns..

Now the scrollbar is only shown in frame 3 and the user can only scroll through frame 3 while the other 2 frames on the top are kind of synced or moved as per the scroll action on the 3rd frame...

The function to do the same is as follows;

function syncScroll()
{
   var left = "";
   var top = "";

   if (window.pageXOffset)
   {
      left = window.pageXOffset;
      top = window.pageYOffset;
   }
   else
   {
      left = document.body.scrollLeft;
      top = document.body.scrollTop;
   }

   for(i=0; i<parent.frames.length; i++)
   {
      if (parent.frames.name != this.name)
      {
         parent.frames[parent.frames[i].name].scrollTo(left,top);
      }
   }

}

This function is called from within the 3rd frame using window.onscroll = s开发者_如何学PythonyncScroll;

Now for some reason, on some of the machines, this does not work as intended (even though it is inconsistent behavior) and hence it does not show the columns in the different frames aligned correctly..

I have really no clue what might be going wrong in those cases..

Please help me.

If you are able to use jQuery, try this one:

http://plugins.jquery.com/project/Scrollsync