[jQuery] 모바일 햄버거메뉴 스크롤 막기

HTML

 

 

닫기

메뉴 내용

CSS

	body.leftOpen{overflow:hidden;}
    body.leftOpen .left_close{opacity:1; transition:all 0.5s; z-index:901;}
    body.leftOpen .menu_wrap{left:0; transition:all 0.5s; z-index:901;}
    body.leftOpen #left_modal{opacity:1; z-index:901; transition:all 0.5s;}

    #left_modal{position:fixed; top:0; right:0; left:0; bottom:0; background:rgba(0,0,0,.65); z-index:-1; opacity:0; transition:all 0.5s;}
    
    .menu_wrap .left_container{width:100%;padding-right:60px;height:100%;position:relative;overflow:hidden;}
    .menu_wrap .left_container .left_inner{width:100%;height:100%;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;}
    .menu_wrap .left_container .close_btn{font-size:0;position:absolute;display:block;top:0;right:0;width:60px;height:60px;background-image: url("");background-repeat:no-repeat;background-size:20px;background-position:center;}

JS

	//메뉴 열기
	$("header").on('click','.m_btn',function(){;
        var $rootScr = $("html").scrollTop() || $("body").scrollTop();
        var objWrapStyl = {
            position: 'fixed',
            minHeight: $(window).height()+$rootScr+'px',
            top: ($rootScr*-1)+'px',
            width: '100%',
        };
        $("body").addClass("leftOpen");
        $('#wrap').css(objWrapStyl).data("top", $rootScr);
    });
    
    //메뉴 닫기
     $(".menu_wrap .close_btn").on('click',function() {
        var $rootScr = $("html").scrollTop();
        var $previusScr = $("#wrap").data("top");

        $("body").removeClass("leftOpen");
        $('#wrap').attr("style", "");
        $("html, body").animate({scrollTop: $previusScr}, 0);
    });

 

아이폰에서도 나름 잘 작동하는듯하여 메모..