jquery - 在另一个 div 上使用滚轮时滚动一个 div

Question

这个问题已经有答案了:

Scroll two elements simultaneously - Prevent event on scroll (1 个回答)

已关闭 2 年前。

假设我有 2 个并排的 div。两者都是 400px x 400px，并且溢出设置为自动。里面的内容高度超过400px，所以有垂直滚动条。

当鼠标悬停在左侧的 div 上，并且用户使用鼠标滚轮滚动时，我希望另一个 div 滚动，反之亦然。

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

这可以用 jQuery 实现吗？

Answer 1

如果您滚动其中任何一个 div，则让两个 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());
    });
});