Question

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

通过拖动这些div的滚动条，滚动效果很好。但是，当我通过鼠标滚动滚动时，滚动发生的速度很慢..如果下面有小提琴链接，有人帮我完美地链接两个滚动条，即使用鼠标滚轮也可以。在此先感谢.. :)
Fiddle Link

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>

SCRIPT：

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

Answer 1

我认为你会进入scrollTop无限循环。如果滚动left，则滚动right，导致left再次滚动的原因，依此类推。

在我的示例中，它按预期快速运行，但只有左侧同步。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

链接两个滚动条，减慢鼠标滚动的速度

1 个答案: