[JavaScript] 🖱️ 마우스 wheel & scroll 이벤트 멈춤 감지하기

목차

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

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

 

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

JavaScript

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

JavaScript

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

Tip

mousewheel은 deprecated 된 구형 이벤트로서 최신 이벤트 스펙인 'wheel' 사용을 권장한다.

---

참고 문헌

• 1[JS] Javascript Scroll Event
• 2🚀 마우스 wheel & scroll 이벤트 멈춤 감지하기
• 3[JS] 스크롤 방향 감지하기