Scroll a div while using the scrollwheel over another div [duplicate]

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 the mouse is over the div on the left, and the user uses the mousewheel to scroll, I want the other div to scroll, and vice versa.

So basically when a user is using the mousewheel over a certain area, I want to control the scroll of another area respectively.

Is this possible with jQuery?

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

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');
    });

Answer 3

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.