테스트 사이트 - 개발 중인 베타 버전입니다

jquery 마우스 휠 이벤트 채택완료

LucyJ 3년 전 조회 3,391

특정 부분만 fullpage.js 같은 효과가 필요해서

아래처럼 스크립트를 넣었는데요..

 

</p>

<p>var win_h = $(window).innerHeight();

    $(".section.bnr").off().on("wheel touchmove  mousewheel DOMMouseScroll",function(e){

        e.preventDefault();

        e.stopPropagation(); 

        $(".section.bnr").each(function(index){

            $(this).attr("data-index",win_h * index);

        });

        var sectionPos = parseInt($(this).attr("data-index"));

        if(e.originalEvent.wheelDelta > 0 ||  e.originalEvent.detail < 0) { //up

            $("html, body").clearQueue().animate({scrollTop:sectionPos - win_h});

            return false;

        } else if (e.originalEvent.wheelDelta < 0 ||  e.originalEvent.detail > 0) { //down

            $("html, body").clearQueue().animate({scrollTop:sectionPos + win_h});

            return false;            

        }

    });</p>

<p>

모바일에서 안되는 문제도 있고,

PC에선 잘 되는데 일부 맥북같은 노트북에서는 섹션별로 잘 멈춰지지가 않는 것 같아서ㅠㅠ...

뭔가 다른 방법이 있을까요..?

사이트에 스크롤 관련 다른 플러그인들이 있는데 충돌이 문제인건지..

도움주시면 감사드리겠습니다.ㅜㅜ

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
3년 전

일부에서 동작된다고 하면 로직은 문제가 없는 것 같습니다.

 

그러나 브라우저별(모바일인지, 맥 OS인지)에 따라 해당 스크립트를 디버깅해  보시는 것을 추천드립니다.

 

모바일에서는 https://github.com/Tencent/vConsole  이것을 사용해서 디버깅해보세요.

 

웹페이지 앞에 " target="_blank" rel="noopener noreferrer">https://unpkg.com/vconsole@3.9.1/dist/vconsole.min.js"> 를 추가 하면 됩니다.

 

https://sir.kr/so_jsframework/204

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인