원페이지 스크롤 모바일 적용

원페이지 스크롤 모바일 적용

QA

원페이지 스크롤 모바일 적용

답변 1

본문

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 소스가 정확하게 위치하는지요?

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 15
© SIRSOFT
현재 페이지 제일 처음으로