scroll the other grid automatically using jquery

Question

I have two grids with same number of rows ( also same height). Both these grids have vertical scrolls ( using style overflow)

When I perform the vertical scroll on the second table , I want the first grid to scroll automatically by same number of rows up/down.

Answer 1

Here's how you can do that. It even works if you have a horizontal scrollbar:

$(function(){
    $("#grid1").scroll(function(){
     $("#grid2")
      .attr('scrollTop', $(this).attr('scrollTop'))
      .attr('scrollLeft', $(this).attr('scrollLeft'));
    });
});

This code assumes that "grid1" and "grid2" are the IDs of the DIVs in which the tables are contained respectively.