✔ 마우스 휠 이벤트

이벤트	설명
wheel	Chrome 56+, Firefox 51+ IE9+ 등의 브라우저에서 지원

$(window).on("wheel", function (event){
  // deltaY obviously records vertical scroll
  
  // event.originalEvent → JavaScript 의 wheelEvent 객체
  // deltaY 값은 개인이 마우스 설정에서 설정한 휠 설정 값에 따라 다르다.
  console.log(event.originalEvent.deltaY);

  if (event.originalEvent.deltaY < 0) {
    // wheeled up
  }
  else {
    // wheeled down
  }
});

• 이벤트 객체의 deltaY 라는 프로퍼티의 값을 보면 마우스 휠을 어느 방향으로 얼마만큼 굴렸는지 확인할 수 있다.

  • 마우스 휠을 아래로 굴렸을 때: deltaY 속성은 양수
  • 마우스 휠을 위로 굴렸을 때: deltaY 속성은 음수

• jQuery가 event 객체를 반환, event.originalEvent → 자바스크립트에서의 원래 이벤트이다.

부드러운 스크롤

• wheel 이벤트의 기본 이벤트는 scroll 이벤트임에 주의하자!
  • 기본이벤트를 제거하면 스크롤 이벤트가 제거되지만 스크롤이 여전히 되고 스크롤 마다 오류메세지가 발생한다.
    → 패시브 모드에서 동작하는 이벤트이므로 오류가 발생한다.
    → 아래의 코드를 위 코드에 추가시키면 패시브 모드를 끈 상태에서 기본이벤트를 제거하게 되므로 마우스 휠로 스크롤이 되지 않게끔 할 수 있다.

window.addEventListener("wheel", function (event) {
  event.preventDefault();
}, { passive: false });