🚀 마우스 wheel & scroll 이벤트 멈춤 감지하기

...

마우스 휠 & 스크롤 멈춤 감지 방법

사용자가 문서를 스크롤 하면 이벤트를 발생시키는데, 스크롤을 멈추면 이를 감지하여 스크립트 처리를 하고 싶은 상황이 있을 것이다.

마우스 스크롤을 감지하는 이벤트는 두가지가 있는데, 문서를 스크롤하면 발생하는 'scroll' 이벤트와 그냥 마우스 가운데 휠 버튼을 내리면 발생하는 'wheel' 이벤트가 있다. 이 이벤트들에 ~~setTimeout()~~ 메서드와 조합해서 종단 지점을 감지하는 로직을 구현 할수가 있다.

let scrolling; // setTimeout() 메서드를 할당하는 전역 변수

window.addEventListener('scroll', (e) => {
    if (!scrolling) {
    	console.log('start scrolling!');
    }
    
    // 일정시간(250ms) 뒤에 스크롤 동작 멈춤을 감지
    clearTimeout(scrolling);
    scrolling = setTimeout(() => {
        console.log('stop scrolling!');
        
        scrolling = undefined;
    }, 250);
})

let wheeling; // setTimeout() 메서드를 할당하는 전역 변수

window.addEventListener('wheel', (e) => {
    if (!wheeling) {
    	console.log('start wheeling!');
    }

    // 일정시간(400ms) 뒤에 스크롤 동작 멈춤을 감지
    clearTimeout(wheeling);
    wheeling = setTimeout(() => {
        console.log('stop wheeling!');
        
        wheeling = undefined;
    }, 400);
})