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

说我有两个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()); }); }); 

Answer 2

看看这个 ……

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

这是代码：

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:

在chrome ， FireFox和Safari测试过。

希望它能帮到你。 欢呼!!

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

Answer 3

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

实例

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