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

To just have both div's scroll if you scroll any of them is easy. Just do this:

http://jsfiddle.net/sxP3m/

$(function () {
    $('#left').scroll(function () {
        $('#right').scrollTop($(this).scrollTop());
    });
    $('#right').scroll(function () {
        $('#left').scrollTop($(this).scrollTop());
    });
});

However, if you only want the other div to scroll, things becomes a lot tricker. This is one hack which may work for you:

http://jsfiddle.net/krv4s/4/

$(function () {
    $('#left').clone().attr('id', 'leftClone').css({
        'position': 'absolute',
            'top': $('#left').position().top,
            'left': $('#left').position().left,
        opacity: 0
    }).appendTo('body');
    $('#right').clone().attr('id', 'rightClone').css({
        'position': 'absolute',
            'top': $('#right').position().top,
            'left': $('#right').position().left,
        opacity: 0
    }).appendTo('body');
    $('#leftClone').scroll(function () {
        $('#right').scrollTop($(this).scrollTop());
    });
    $('#rightClone').scroll(function () {
        $('#left').scrollTop($(this).scrollTop());
    });
});

Answer 2

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:

<div id="first">
    <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>
 <br><hr>         <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>
       <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>
 <br><hr>         <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>


</div>

<div id="second" style="background:#0f0;">
       <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>
 <br><hr>         <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>
       <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>
 <br><hr>         <br><hr> <br><hr> <br><hr> <br><hr> <br><hr>


</div>

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.

Answer 3

If you want to scroll (when mouse wheeling) one div in place of another, you can try this:

Live example

$("#inner").hover(function() {
    $(document).bind('mousewheel DOMMouseScroll',function(e){

        var isScrollInInnerDiv=$(e.target).is("#inner");
        /* or any other condition, like this:
          e.target.className.indexOf !== undefined && e.target.className!=null &&      
          e.target.className.indexOf("v-table") > -1;
                  */
        if (isScrollInInnerDiv) {
            if (e.preventDefault) {
                    e.preventDefault();
            }
            e.stopPropagation();
            var delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail);
            //make scroll size reasonably big
            if (delta>0 && delta<120)
                  delta=120;
            if (delta<0 && delta>-120)
                  delta=-120;
            var outerDiv=$( "#outer");
            outerDiv.scrollTop(outerDiv.scrollTop()-delta);
         }
    });
    }, function() {
        $(document).unbind('mousewheel DOMMouseScroll');
    });