Question

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

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

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

这可以用jQuery吗？

Answer 1

如果滚动其中任何一个，只需要两个div的滚动很容易。就这样做：

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

Answer 2

查看THIS ...

我还在努力，但我认为它对你有用。

这是代码：

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>

在chrome，FireFox和Safari进行了测试。

希望它会对你有所帮助。欢呼!!

如果你想出更有效的方法;请更新那个小提琴并评论链接。

Answer 3

如果你想滚动（当鼠标滚动时）一个div代替另一个div，你可以试试这个：

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

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

3 个答案: