使用滚轮在另一个div上滚动div

Question

说我有两个div并排.两者都是400px x 400px,溢出设置为auto.里面的内容高于400px所以有垂直滚动条.

当鼠标在左边的div上方,并且用户使用鼠标滚轮滚动时,我希望另一个div滚动,反之亦然.

所以基本上当用户在特定区域上使用鼠标滚轮时,我想分别控制另一个区域的滚动.

这有可能与jQuery？

Answer 1

如果同时滚动两个div的滚动条，则很容易。只是这样做：

http://jsfiddle.net/sxP3m/

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

但是，如果只希望另一个div滚动，那么事情就变得很复杂了。这是一种可能对您有用的技巧：

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