如何在两个窗口之间同步滚动 [英] How to Synchronize Scroll Between two windows

问题描述

我的网站上有一个弹出窗口，其中显示有关在主屏幕中显示的元素的其他信息.我需要同步两个窗口之间的滚动，以使当用户滚动其中一个窗口时，另一个窗口以相同的数量自动滚动.

I have a popup window in my site that show additional information about the elements been show in the main screen. I need to syncronize the scrolling between the two windows, in a way that when the user scroll one of the window , the other window is automatticaly scrolled in the same ammount.

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

I was able to do that using jquery scroll event, and using the scrollTop function to set the scroll position. something like this:

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

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

I've simplified the actual code, because I have to do some work to reach the elements in another window, but this is not the question.

问题是，此代码在Chrome和IE中可以正常工作，但是在FireFox中，滚动速度确实很慢.

The problem is, this code works fine in Chrome and IE, but in FireFox the scrolling gets really slow.

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

I've created an example here : http://jsfiddle.net/Lv2dw787/4/. The problem seems to ocurr with DIV's in the same page as well. You can note that when the scrolling syncing is disabled, the speed turn back to normal.

有人知道如何在FireFox上解决此问题吗?

Does anyone have a clue on how to fix this on FireFox?

在Dave Chen回答后进行

Edit after Dave Chen answer:

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

The accepted answer solved my problem, but it has a catch. I first tried to do this:

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

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

But the $("#contentDivB").scrollTop( scrollPos ); line seems to generate a scroll event on divB only after the current function finishes executing, so the finally part of try..finally was executing before that. So I had to this:

lock = true;

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

以及DivB滚动事件:

and on DivB scroll event:

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

推荐答案

原因是由于两个原因:

1. Firefox的滚动效果确实很平滑
2. jQuery的scrollTop将触发事件

1. Firefox does smoothing on its scrolling
2. jQuery's scrollTop will trigger events

让我们看一些伪代码:

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

问题在于，当您scroll divA or divB to the same spot时，也会导致when再次发生.

The problem is that when you scroll divA or divB to the same spot, it will also cause the when to happen again.

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

So for example, when you scroll divA, this is what happens:

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

这会导致divA滚动几下后，divA停留在同一位置，从而导致Firefox的响应缓慢.

This causes divA to stick to the same spot after scrolling a little, and thus what causes the sluggish effect in firefox.

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

A solution is to ignore scrolling events when you scroll:

$(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);
    }
});

示例

这篇关于如何在两个窗口之间同步滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！