jquery 마우스 휠 이벤트
본문
특정 부분만 fullpage.js 같은 효과가 필요해서
아래처럼 스크립트를 넣었는데요..
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;
}
});
모바일에서 안되는 문제도 있고,
PC에선 잘 되는데 일부 맥북같은 노트북에서는 섹션별로 잘 멈춰지지가 않는 것 같아서ㅠㅠ...
뭔가 다른 방법이 있을까요..?
사이트에 스크롤 관련 다른 플러그인들이 있는데 충돌이 문제인건지..
도움주시면 감사드리겠습니다.ㅜㅜ
답변 1
일부에서 동작된다고 하면 로직은 문제가 없는 것 같습니다.
그러나 브라우저별(모바일인지, 맥 OS인지)에 따라 해당 스크립트를 디버깅해 보시는 것을 추천드립니다.
모바일에서는 https://github.com/Tencent/vConsole 이것을 사용해서 디버깅해보세요.
웹페이지 앞에 <script src="https://unpkg.com/vconsole@3.9.1/dist/vconsole.min.js"></script> 를 추가 하면 됩니다.
답변을 작성하시기 전에 로그인 해주세요.
