Управление прокруткой div A при прокрутке div B с колесом мыши и наоборот

Question

У меня есть 2 div, которые действуют как список или таблица. Я пытаюсь сделать прокрутку прокрутки div A div B и наоборот. с колесом мыши.

Проблема с этим является, так как я связать «прокручивать» на оба, когда я установить scrollTop = что-то из сНа В для сНа А это также запустит «прокручивать» в сНу А.

Что я придумал с это: на mouseover - связывают «прокручивать» для текущего элемента, а затем на mouseout отвязать его и в функции привязки я изменить пример 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 к другому достаточно быстро, что вызывает проблемы и не работает корректно.

У кого-нибудь есть идея?

Ах игнорировать следующий код в скрипкой:

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++; 
}); 

Благодаря передовой.

Answer 1

Вы можете добавить прослушиватель событий, что при прокрутке 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)