Scroll a div while using the scrollwheel over another div

Question

Say I have 2 divs side by side. Both are 400px x 400px, and have overflow set to auto. The content inside is taller than 400px so there are vertical scrollbars.

When

Answer 1

have a look at THIS...

i'm still working on it, but i thought it'll be useful for you.

here is the code:

JQuery:

var s=0;
$('#first').scroll(function(e){
    e.preventDefault();
    var tgt='#second';
    if(s==0){
    s=1;
    $(''+tgt).animate({
        scrollTop: $(this).scrollTop(),
         scrollLeft: $(this).scrollLeft()
    }, 10,function(){
    s=0;
    });
    }
});

$('#second').scroll(function(e){
     e.preventDefault();
    var tgt='#first';
    if(s==0){
        s=1;
    $(''+tgt).animate({
        scrollTop: $(this).scrollTop(),
         scrollLeft: $(this).scrollLeft()
    }, 10,function(){
    s=0;
    });
    }
});

CSS:

div{
    width:400px;
    height:400px;
    background:#f00;
    overflow:auto;
    float:left;
}

HTML:

tested in chrome,FireFox and Safari.

hope it'll help you. cheers !!

also if you come up with more efficient method; please do update that fiddle and comment the link.