链接两个滚动条会减慢鼠标滚轮滚动速度

Question

我正在尝试使用jquery/javascript链接两个可滚动div的滚动条。

通过拖动这些div 的滚动条，滚动效果很好。但是，当我通过鼠标滚轮滚动时，滚动速度非常慢。提供了下面的小提琴链接，有人帮助我完美地链接了两个滚动条，即使鼠标滚轮滚动也有效。提前谢谢..:)
小提琴链接

.HTML：

<div id="left" class="linked">
<img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Eiffel_Tower_(72_names).jpg">
</div>
<div id="right" class="linked">
<img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Eiffel_Tower_(72_names).jpg">
</div>

脚本：

$('.linked').scroll(function(){
$('.linked').scrollTop($(this).scrollTop());
$('.linked').scrollLeft($(this).scrollLeft());
})

Answer 1

我认为你会进入一个scrollTop无限循环的东西。如果left滚动，right滚动，导致left再次滚动的原因等等。

在我的示例中，它按预期快速工作，尽管只有左侧同步。

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

#left, #right, #test { 
  width: 300px; 
  height: 400px; 
  overflow: scroll; 
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="left" class="linked">
  <img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Eiffel_Tower_(72_names).jpg">
</div>
<div id="right" class="linked">
  <img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Eiffel_Tower_(72_names).jpg">
</div>
<div id="test">
  <img src="http://upload.wikimedia.org/wikipedia/commons/5/51/Eiffel_Tower_(72_names).jpg">
</div>