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

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