我有 2 个 div,其作用类似于列表或表格,我正在尝试使 div A 的滚动 div B 滚动,反之亦然。使用鼠标滚轮。
问题是因为我在两者上都绑定(bind)了“滚动”,当我为div A设置scrollTop =来自div B的东西时,它也会触发div A的“滚动”。
我想出的是:在mouseover
上 - 为当前元素绑定(bind)“scroll”,然后在mouseout
上取消绑定(bind)它,并在绑定(bind)函数中更改scrollTop示例:
$('#parent1, #parent2').off('mouseover').on( 'mouseover', function () {
var that = this;
refresh(that);
$(this).off( 'scroll').on( 'scroll', function () {
refresh(that);
});
} ).off('mouseout').on( 'mouseout', function () {
$(this).off( 'scroll');
refresh(this);
});
function refresh(that){
if(that == $('#parent1')[0]){
$('#parent2').scrollTop($(that).scrollTop());
}else{
$('#parent1').scrollTop($(that).scrollTop());
}
}
查看实际效果:Fiddle
但是,当滚动并从 1 个 div 足够快地移动到另一个 div 时,它会导致麻烦并且无法正常工作。
有人有想法吗?
啊忽略 fiddle 中的以下代码:
var i= 0;
$('#parent1 div').each(function(index, div){
$(div).append(" " + i);
i++;
});
var i= 0;
$('#parent2 div').each(function(index, div){
$(div).append(" " + i);
i++;
});
提前致谢。
最佳答案
您可以添加一个事件监听器,当您滚动 A 时,它会更新 B 的滚动位置。但是为此,您需要一个标志,以便当您设置滚动 B 位置时,它不会触发滚动 B 事件。
fiddle :http://jsfiddle.net/7qBvM/
var ignoreEvent = false;
$('#parent1').scroll( function() {
var ignore = ignoreEvent;
ignoreEvent = false
if (!ignore) {
ignoreEvent = true;
$('#parent2').scrollTop($(this).scrollTop());
}} );
$('#parent2').scroll( function() {
var ignore = ignoreEvent;
ignoreEvent = false;
if (!ignore) {
ignoreEvent = true;
$('#parent1').scrollTop($(this).scrollTop());
}} );
(在 this question 的帮助下)
关于javascript - 用鼠标滚轮控制div A的滚动同时滚动div B,反之亦然,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20924247/