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

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

我可以使用jquery scroll事件和scrollTop函数来设置滚动位置。大概是这样的：

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

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

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

我在这里创建了一个示例：。问题似乎也出现在同一页的DIV上。您可以注意到，当滚动同步被禁用时，速度将恢复正常

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

在Dave Chen之后编辑答案：

公认的答案解决了我的问题，但它有一个陷阱。我首先尝试这样做：

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

但是$contentDivB.ScrollTopScrollPos；行似乎仅在当前函数完成执行后才在divB上生成滚动事件，因此try..finally的最后一部分在此之前执行。所以我不得不这样做：

lock = true;

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

和在DivB滚动事件上：

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

---

原因有两个：

Firefox在滚动时不会平滑 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);
    }
});

---

原因有两个：

Firefox在滚动时不会平滑 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);
    }
});

---

在我的Mac Firefox上运行良好。您是否尝试过另一台计算机并确认它不是您安装的本地计算机？你的Firefox是不是太慢了？我可以确认它在mac上的Firefox上运行得比较慢，在我的mac Firefox上运行得很好。您是否尝试过另一台计算机并确认它不是您安装的本地计算机？你的Firefox很慢吗，句号？我可以确认它在mac上的Firefox上运行得比较慢。我看到它在你发送的示例上运行，但我不明白为什么。If ignore最初设置为true，tmpIgnore设置为ignore，If语句为If！tmpIgnore，if语句中的代码是如何执行的？哦，现在我明白了，这只会在第一次发生。很抱歉造成混淆，不管ignore的初始值设置为什么。重要的是，ignore将充当一个标志，检测何时是人类滚动，或者何时计算机滚动另一个div。当计算机滚动div以匹配另一个div时，它不会尝试滚动另一个div。当它是人类滚动时，它会使另一个div匹配。我看到它在您发送的示例中运行，但我不明白为什么。If ignore最初设置为true，tmpIgnore设置为ignore，If语句为If！tmpIgnore，if语句中的代码是如何执行的？哦，现在我明白了，这只会在第一次发生。很抱歉造成混淆，不管ignore的初始值设置为什么。重要的是，ignore将充当一个标志，检测何时是人类滚动，或者何时计算机滚动另一个div。当计算机滚动div以匹配另一个div时，它不会尝试滚动另一个div。当它是人类滚动时，它会使另一个div匹配。