div 스크롤의 최대 스택 호출 오류 방지

Question

scroller1 scroller2 
----------- ----------- 
|this is o| |this is a| 
|ne elemen| |nother el| 
|t, four l| |3 lines | 
|ines  | |   | 
----------- ----------- 

간단한 예제입니다. 각 scroller의 n 번째 요소로 스크롤 할 시스템을 설정했지만 분수를 사용하여 scroller1이 요소 4에 있고 중간에 5가 있으면 scroller2에 대해서도 동일한 작업을 수행하도록 분수를 사용합니다.

하지만 'onscroll'함수를 호출하면 다른 스크롤러가 올바른 위치로 설정되지만 scrollTop을 변경하면 스크롤되므로 'onscroll'이 호출됩니다. Javascript가 Max Stack Call 오류를 던지거나 두 스크롤러가 아래쪽에 도달 할 때까지 차례로 반복됩니다.

어떻게 예방할 수 있습니까?

Answer 1

그것을 기반으로 onscroll 코드를 전역 변수, currentlyHandlingScrollEvent를 만들고 조건화 :

var currentlyHandlingScrollEvent = false; 
function handleScroll (e) { 
    if (!currentlyHandlingScrollEvent) { 
    currentlyHandlingScrollEvent = true; 
    // do stuff ... 
    currentlyHandlingScrollEvent = false; 
    } 
} 

scroller1.onscroll = handleScroll; 
scroller2.onscroll = handleScroll;