원페이지 스크롤 모바일 적용
본문
https://codepen.io/recordboy/pen/JBmvpp
pc에서 스크롤만 먹히고
반응형으로 모바일에서 쓰려고 하니 손으로 터치해서 움직이니 안 스크롤이 안되는데요.
//메인 원페이지 스크롤
var scroll = function(){
var $nav = null,
$cnt = null,
moveCnt = null,
moveIndex = 0,
moveCntTop = 0,
winH = 0,
time = false; // 새로 만든 변수
$(document).ready(function(){
init();
initEvent();
});
var init = function(){
$cnt = $("#main-wrap");
$nav = $(".scroll-nav a");
};
var initEvent = function(){
$("html ,body").scrollTop(0);
winResize();
$(window).resize(function(){
winResize();
});
$nav.on("click", function(){
moveIndex = $(this).parent("li").index();
moving(moveIndex);
return false;
});
$cnt.on("mousewheel", function(e){
if(time === false){ // time 변수가 펄스일때만 휠 이벤트 실행
wheel(e);
}
});
};
var winResize = function(){
winH = $(window).height();
$cnt.children("div").height(winH);
$("html ,body").scrollTop(moveIndex.scrollTop);
};
var wheel = function(e){
if(e.originalEvent.wheelDelta < 0){
if(moveIndex < 3){
moveIndex += 1;
moving(moveIndex);
};
}else{
if(moveIndex > 0){
moveIndex -= 1;
moving(moveIndex);
};
};
};
var moving = function(index){
time = true // 휠 이벤트가 실행 동시에 true로 변경
moveCnt = $cnt.children("div").eq(index);
moveCntTop = moveCnt.offset().top;
$("html ,body").stop().animate({
scrollTop: moveCntTop
}, 1000, function(){
time = false; // 휠 이벤트가 끝나면 false로 변경
});
$nav.parent("li").eq(index).addClass("on").siblings().removeClass("on");
};
};
scroll();
소스입니다. 어디를 수정하면 될까요?
답변 1
var init = function(){
$cnt = $("#main-wrap");
$nav = $(".scroll-nav a");
};
부분이 샘플소스와 다른데 html 소스가 정확하게 위치하는지요?