javascript - 如何在两个窗口之间同步滚动

Question

我的站点中有一个弹出窗口，显示有关主屏幕中显示的元素的附加信息。我需要同步两个窗口之间的滚动，这样当用户滚动其中一个窗口时，另一个窗口会自动以相同的数量滚动。

我能够使用 jquery 滚动事件并使用 scrollTop 函数设置滚动位置来做到这一点。像这样:

$("#localDiv").scroll(function() {        
    var scrollPos = $("#localDiv").scrollTop();
    $("targetElement").scrollTop( scrollPos );
});

我已经简化了实际代码，因为我必须做一些工作才能到达另一个窗口中的元素，但这不是问题所在。

问题是，这段代码在 Chrome 和 IE 中运行良好，但在 FireFox 中滚动变得非常慢。

我在这里创建了一个示例:http://jsfiddle.net/Lv2dw787/4/ .该问题似乎也发生在同一页面中的 DIV 中。您可以注意到，当禁用滚动同步时，速度恢复正常。

有人知道如何在 FireFox 上解决这个问题吗？

---

根据 Dave Chen 的回答编辑:

接受的答案解决了我的问题，但有一个问题。我首先尝试这样做:

lock = true;
try {
    var scrollPos = $("#contentDivA").scrollTop();
    $("#contentDivB").scrollTop( scrollPos );
}
finally
{
    lock = false; 
}

但 $("#contentDivB").scrollTop( scrollPos ); 行似乎仅在当前函数执行完毕后才在 divB 上生成滚动事件，因此 try.. 的 finally 部分finally 在此之前执行。所以我不得不这样做:

lock = true;

var scrollPos = $("#contentDivA").scrollTop();
$("#contentDivB").scrollTop( scrollPos );

和 DivB 滚动事件:

if (lock)
    lock = false;
else {
   (Do the scroll on DivA)
} 

Answer 1

原因有两个:

1. Firefox 对其滚动进行平滑处理
2. jQuery 的scrollTop 会触发事件

让我们看一些伪代码:

When divA is scrolled -> scroll divB to the same spot
When divB is scrolled -> scroll divA to the same spot

问题是，当您将 divA 或 divB 滚动到同一位置时，它还会导致 when 再次发生。

例如，当您滚动 divA 时，会发生以下情况:

scroll divA -> scroll divB to the same spot -> scroll divA to the same spot

这会导致 divA 在稍微滚动后停留在同一位置，从而导致在 firefox 中效果缓慢。

解决方案是在滚动时忽略滚动事件:

$(document).ready(function() {

    var ignore = false;

    $("#contentDivA").scroll(function() {  
        var tmpIgnore = ignore;
        ignore = false;
        if (!tmpIgnore && $("#chkSyncEnabled")[0].checked)
        {
            var scrollPos = $("#contentDivA").scrollTop();
            scrollTop($("#contentDivB"), scrollPos);
        }
    });

    $("#contentDivB").scroll(function() {
        var tmpIgnore = ignore;
        ignore = false;
        if (!tmpIgnore && $("#chkSyncEnabled")[0].checked)
        {
            console.log("here");
            var scrollPos = $("#contentDivB").scrollTop();
            scrollTop($("#contentDivA"), scrollPos);
        }
    });

    function scrollTop(el, position) {
        ignore = true;
        el.scrollTop(position);
    }
});

Example