LHJ

I'm a FE developer.

스크롤 이벤트

10 Jun 2020 » js

스크롤 이벤트

스크롤 방향을 알려주는 유용한 프로퍼티가 있다.
바로 delta 프로퍼티이다.

$(function(){
    // Firefox 는 mousewheel 이벤트가 없음, mousewheel 과 DOMMouseScroll 이벤트를 동시에 사용
    $("html, body").on('mousewheel DOMMouseScroll', function(e) {
        var E = e.originalEvent;
        delta = 0;

        // console.dir(e); // 이벤트가 일어나는 객체에 포함된 프로퍼티 확인
        console.dir(E); // 이벤트가 일어나는 객체의 프로터디 중에 originalEvent의 값 확인
        // console.log(E.detail); // e.originalEvent 내의 프로퍼티에 detail의 값 확인, detail 값이 6으로 나옴

        if (E.detail) {
            // Firefox의 DOMMouseScroll 이벤트 사용시
            // 마우스휠을 내릴 때 detail 값이 6 또는 3이 나온다. 버전마다 다르다.
            // 때문에 120으로 맞춰줄 필요가 있다.
            delta = E.detail * (120 / Math.abs(E.detail));
            console.log(delta);

            // $('body').text(delta);
        }else{
            // 익스, 크롬, 사파리, 오페라의 mousewheel 이벤트 사용시
            // 마우스휠을 내릴 때 wheelDelta 값이 -120이 나온다.
            delta = E.wheelDelta;
            console.log(delta);
            // $('body').text(delta);
        };
    });
});