[jQuery] mousewheel.js

[jQuery] mousewheel.js

웹 서핑을 하다 보면 간혹 마우스 휠만 위나 아래쪽으로 살짝 움직였을 뿐인데 화면 전체가 스크롤되거나 페이지가 바뀌면서 다음 화면으로 넘어가는 경험을 한 적이 있을 겁니다. 이는 클릭이나 마우스 오버와 마찬가지로 마우스 휠 이벤트를 이용하여 구현한 경우인데, 클릭이나 마우스 오버, 스크롤 등은 jQuery에서 기본으로 제공하는 사용자 이벤트이지만 mousewheel 이벤트를 사용하기 위해서는 mousewheel.js라는 별도의 플러그인 파일을 이용해야 합니다. 이번 절에서는 mousewheel.js 의 사용법에 대해서 알아보도록 하겠습니다.

# Contents

mousewheel.js

# mousewheel.js

jQuery의 mousewheel를 다운받아 임포트를 해주고, 아래 JavaScript를 처리하면 스크롤 이벤트를 처리할 수 있습니다.

$(document).ready(() => { let box1 = $(".box1"); box1.on("mousewheel", (e, delta) => { if (delta > 0) { console.log("마우스가 올라갑니다."); } else if (delta < 0) { console.log("마우스가 내려갑니다."); } }); });

from http://junhokims.tistory.com/106 by ccl(A) rewrite - 2021-11-23 16:01:22