사용자가 마우스로 휠을 움직이거나, 스크롤을 하다가 멈췄을 때 감지하는 방법에 대해서 알아보겠습니다.

예를 들어, 페이지를 이동하지 않을 때, 어떤 팝업을 보여주거나 어떤 처리를 하고 싶을 때가 있습니다. 휠과 스크롤 이벤트가 전달되다가 멈췄을 때를 인지하는 방법을 소개합니다.

1. Scroll 이벤트 멈춤 감지

스크롤을 하다가 멈추면, 스크롤 멈춤을 감지하여 팝업을 띄우는 예제입니다.

HTML

HTML은 아래와 같이 스크롤이 가능하도록 길게 만들었습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>마우스 스크롤 이벤트 감지</title>
  <style>
    body {
      height: 2000px;
    }
  </style>
</head>
<body>
  <p>스크롤 이벤트를 감지합니다. 스크롤을 멈추면 화면에 메시지가 표시됩니다.</p>
</body>
</html>

Javascript

addEventListener()으로 scroll 이벤트를 수신하고, handleScroll() 안에서 setTimeout을 사용하여 500ms간 이벤트가 오지 않는 것을 체크하여 스크롤 멈춤을 감지할 수 있습니다.

  • clearTimeout(scrollTimeout) : 스크롤 이벤트가 지속적으로 오면 scrollTimeout을 clear하여 setTimeout()의 함수가 실행되지 않도록 만듬
  • 500ms간 이벤트가 오지 않으면 setTimeout의 함수가 실행되어, 특정 작업을 수행시킬 수 있음
let scrollTimeout;

function handleScroll() {
  // 스크롤 중에는 scrollTimeout을 재설정
  clearTimeout(scrollTimeout);

  // 500ms 후에 스크롤이 멈춤 감지
  scrollTimeout = setTimeout(function () {
    alert("스크롤 멈춤 감지");
  }, 500);
}

window.addEventListener("scroll", handleScroll);

2. Wheel 이벤트 감지

스크롤은 키보드의 방향키를 눌러 할 수도 있고, 마우스의 휠을 누르거나, 웹페이지의 스크롤바를 클릭하여 위치를 이동시킬 수도 있습니다. 만약 마우스의 Wheel 이벤트만 감지하고 싶을 때는, 위와 동일한 방식이지만 wheel 이벤트만 수신하여 처리하시면 됩니다.

HTML

스크롤 가능한 크기로 HTML 페이지를 만들었습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>마우스 휠 이벤트 감지</title>
  <style>
    body {
      height: 2000px;
    }
  </style>
</head>
<body>
  <p>휠 이벤트를 감지합니다. 휠을 멈추면 화면에 메시지가 표시됩니다.</p>
</body>
</html>

Javascript

위 코드와 동일하지만, wheel 이벤트만 수신하여 멈춤 감지를 처리하고 있습니다.

let wheelTimeout;

function handleWheel() {
  // Wheel 중에는 scrollTimeout을 재설정
  clearTimeout(wheelTimeout);

  // 500ms 후에 Wheel이 멈춤 감지
  wheelTimeout = setTimeout(function () {
    alert("Wheel 멈춤 감지");
  }, 500);
}

window.addEventListener("wheel", handleWheel);