부끄러운 스크롤 휠없이 Divs의 동기화 스크롤

Question

스크롤 막대가있는 페이지에 두 개의 div가 성공적으로 표시되고 한 div가 스크롤 될 때 jQuery를 사용하여 다른 스크롤이 적절하게 스크롤됩니다.

$('#left').scroll(function() { 
    $('#right').scrollTop($(this).scrollTop()); 
}); 

$('#right').scroll(function() { 
    $('#left').scrollTop($(this).scrollTop()); 
}); 

이 키보드를 사용하거나 스크롤 할 스크롤 막대를 드래그 클릭으로 함께으로 잘 작동하지만 마우스 스크롤 휠을 사용하는 경우는 그 사실에, 나는 생각한다, 때문에, 매우 느린 '피드백 루프'가 있습니다.

마우스 휠을 사용하여 스크롤하는 것이 원활하게 이루어 지도록이 루프를 방지 할 수있는 방법이 있습니까?

여기에 fiddle이 있습니다.

Answer 1

divs에 scroll 이벤트 리스너가 있다는 것이 문제입니다. 그 사건은 그때 튀어 오릅니다. 하나의 workaroung은 off으로 다른 청취자를 바인딩 해제 한 후 나중에 다시 할당하는 것입니다.

브라우저가 scrollTop을 새 값으로 설정하는 데 다소 시간이 걸리기 때문에 약간의 지연이 있어야합니다. 한 가지 방법은 setTimeout을이 작업에 사용하는 것입니다.

// a helper variable 
var timeout; 

$('#left, #right').on("scroll", function callback() { 
    // clear the 'timeout' every 'scroll' event call 
    // to prevent re-assign 'scroll' event to other element 
    // before finished scrolling 
    clearTimeout(timeout); 

    // get the used elements 
    var source = $(this), 
     target = $(source.is("#left") ? '#right' : '#left'); 

    // remove the callback from the other 'div' and set the 'scrollTop' 
    target.off("scroll").scrollTop(source.scrollTop()); 

    // create a new 'timeout' and reassign 'scroll' event 
    // to other 'div' on 100ms after the last event call 
    timeout = setTimeout(function() { 
     target.on("scroll", callback); 
    }, 100); 
}); 

Working example.