[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("마우스가 내려갑니다.");
        }
    });
});