在另一个div上使用滚轮的同时滚动一个div [英] Scroll a div while using the scrollwheel over another div

问题描述

说我有2个div并排.两者均为400px x 400px，并且溢出设置为自动.里面的内容高于400像素，因此有垂直滚动条.

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.

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

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.

使用jQuery是否可能?

Is this possible with jQuery?

推荐答案

如果同时滚动两个div的滚动条，则很容易.只需这样做:

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

但是，如果您仅只希望另一个div滚动，那么事情就变得很棘手了.这是一种可能对您有用的技巧:

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

这篇关于在另一个div上使用滚轮的同时滚动一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！