Как синхронизировать прокрутку между двумя окнами

Question

У меня есть всплывающее окно на моем сайте, в котором отображается дополнительная информация об элементах, отображаемых на главном экране. Мне нужно синхронизировать прокрутку между двумя окнами, так что, когда пользователь прокручивает одно из окон, другое окно автоматически прокручивается в том же количестве.

Я смог сделать это с помощью события прокрутки jquery и с помощью функции scrollTop установить положение прокрутки. что-то вроде этого:

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

я упростил фактический код, потому что я должен сделать какую-то работу, чтобы достичь элементов в другом окне, но это не вопрос.

Проблема в том, что этот код отлично работает в Chrome и IE, но в FireFox прокрутка становится очень медленной.

Я создал пример здесь: http://jsfiddle.net/Lv2dw787/4/. Проблема, похоже, связана с DIV на той же странице. Вы можете заметить, что когда синхронизация прокрутки отключена, скорость возвращается к нормальной.

Кто-нибудь знает, как исправить это на FireFox?

---

Редактировать после Дэйва Чена ответа:

Принятого ответа решил мою проблему, но у него есть улов. Сначала я пытался сделать это:

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

Но $("#contentDivB").scrollTop(scrollPos); линия, кажется, генерировать событие прокрутки DIVB только после того, как текущая функция завершает выполнение, так что в конце концов часть try..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 

Проблема заключается в том, что когда вы scroll divA or divB to the same spot, это также вызовет when повторилось.

Так, например, при прокрутке DIVA, это то, что происходит:

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

Это приводит DIVA придерживаться того же места после прокрутки немного, и, таким образом, что вызывает вялый эффект в светлячок.

Решение состоит в том, чтобы игнорировать событие прокрутки при прокрутке:

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