[JavaScript] 스크롤 멈춤 감지 방법 & wheel vs scroll 이벤트 차이

웹페이지에서 스크롤 이벤트를 다룰 때,
'스크롤이 멈췄을 때' 어떤 동작을 트리거해야 할 경우가 종종 있습니다.
또한 wheel 이벤트와 scroll 이벤트는 비슷해 보이지만 작동 방식에 차이가 있습니다.
아래에서 각각을 정리합니다.

 

scroll 이벤트 vs wheel 이벤트 차이

항목	scroll 이벤트	wheel 이벤
발생 시점	스크롤이 실제로 이동할 때	사용자가 마우스 휠을 돌릴 때
주요 대상	스크롤이 가능한 모든 요소	보통 브라우저 전체(window) 대상
이벤트 빈도	부드럽게 움직이는 동안 계속 발생	휠이 한번 돌아갈 때마다 발생
대표적 사용 사례	스크롤 트래킹, 스크롤 위치 감지	스크롤 시작 탐지, 커스텀 스크롤
터치스크린 지원 여부	✅ (터치 스크롤 감지 가능)	❌ (마우스 휠에 한정)

 

요약하자면, scroll은 해당 요소에 스크롤 동작이 감지되면 동작하고, wheel 이벤트는 마우스 wheel이 돌아가면 동작함.

 

스크롤 멈춤 감지 방법

스크롤 이벤트는 스크롤하는 동안 계속 발생합니다.
따라서 "스크롤이 멈췄다"는 걸 감지하려면 **타이머(debounce 기법)**를 이용해야 합니다.

 

scroll 이벤트를 활용한 예시

let isScrolling;

// 스크롤 이벤트 리스너
window.addEventListener('scroll', () => {
  // 스크롤할 때마다 타이머를 초기화
  clearTimeout(isScrolling);

  // 300ms 이내에 추가 스크롤이 없으면 "멈춤"으로 간주
  isScrolling = setTimeout(() => {
    console.log('스크롤 멈춤 감지!');
    // 여기에 멈췄을 때 실행할 로직 작성
  }, 300);
});

설명:

• 스크롤 이벤트가 발생할 때마다 setTimeout을 초기화합니다.
• 마지막 스크롤 이후 300ms 동안 아무런 스크롤 이벤트가 없으면,
  ➔ 스크롤이 멈춘 것으로 간주합니다.

wheel 이벤트를 활용한 예시

let isWheeling

window.addEventListener('wheel', () => {
  // 스크롤할 때마다 타이머를 초기화
  clearTimeout(isWheeling);

  // 300ms 이내에 추가 스크롤이 없으면 "멈춤"으로 간주
  isWheeling = setTimeout(() => {
    console.log('휠 멈춤 감지!');
    // 여기에 멈췄을 때 실행할 로직 작성
  }, 300);
});

 

 

참조 블로그:

https://inpa.tistory.com/entry/%F0%9F%9A%80-wheel-scroll-%EB%A9%88%EC%B6%A4-%EA%B0%90%EC%A7%80

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