모바일 햄버거 메뉴 (레프트 메뉴) 오픈 스크롤 막기

모바일 햄버거 메뉴를 만드는 방법은 많다.

해당 메뉴를 눌렀을 때 뒤에 암막처럼 깔린 뒤에,

컨텐츠들이 스크롤 안되게 해야하는게 정석인데..

이를 위해 스크롤 막는 스크립트를 사용했다가는 레프트 메뉴마저 스크롤을 사용할 수 없는 일이 생겨버린다 ㅠ_ㅠ

조건문을 줘서 스크롤을 막다 풀었다 해버리니, 스크롤 이벤트 관련 스크립트가 오류나는 일이!

알고보니 마크업부터 제대로 잘 짜지 못해 생긴 일이라서

다시금 잊지말자고 기록..

* 기존에 내가 했던 방식

<div class="userWrap">  ---> fixed 시켜주고, width 100%, background:(0,0,0, 0.7)의 배경을 만들어줌

<div class="user"> ----> 메뉴 내용 생성 (약 width값 60%)

디테일한 내용

</div>

</div>

이런식으로 하니 userwrap 전체가 100%로 잡혀 스크롤 가능시, 컨텐츠마저 스크롤되는 어이없는 상황 발생

* 새로운 마크업

<div id="userBg"><div> ----> userWrap과 동일하게 해당값 지정 (얘가 배경)

<div class="userWrap">  ---> width 100% -> user의 넓이값으로 바꿔줌 (*즉 얘가 레프트메뉴가 됨)

<div class="user"> ----> 넓이 삭제

디테일한 내용

</div>

</div>

* 스크립트

* 기존에 내가 했던 방식 (쪽팔..)

변수지정

  $user = $('.userwrap');

  var winHeight = $(window).height() + 35;

  var userHeight = $('.user-contents').height() ;

  var st = $(this).scrollTop();

  $('.top-menu').on('click', function(){  ----> 오픈시 이벤트

$user.addClass('open');

$('.userwrap').unbind('touchmove');

$('.userwrap').unbind('mousewheel');

  });

  $('.user-close').on('click', function(){ ----> 닫았을 때 이벤트

$user.removeClass('open');

$('#viewport').unbind('touchmove');

$('#viewport').unbind('mousewheel');

  });

이런식으로 하니 userwrap 전체가 100%로 잡혀 스크롤 가능시, 

컨텐츠마저 스크롤되는 어이없는 상황 발생

* 새로운 마크업

  $user = $('.userwrap');

  var winHeight = $(window).height() + 35;

  var userHeight = $('.user-contents').height() ;

  var st = $(this).scrollTop();

  var winTop = 0; --> 스크롤값 받기 위해 추가

$('.top-menu').on('click', function(){

    $user.addClass('open');

    $('#userBg').show();

    

    $('#userBg').on('touchstart',function(e){

      e.preventDefault()

    });

    winTop = $(window).scrollTop();

    $('#viewport').css({'top':-winTop,position:'fixed'});  

----> ★핵심내용 : 해당 스크롤 값을 받아와 음수를 줌으로써, 원래대로 스크롤에서 열리듯 보이게함

});

  $('.user-close').on('click', function(){  

    $user.removeClass('open');

    $('#userBg').hide();

    

    $('#viewport').css({'top':'',position:'relative'})

    $(window).scrollTop(winTop)

----> ★핵심내용 : 스크롤을 위에서 준 스크롤 값을 다시 불러와 그대로 적용시켜 원래 위치대로 놓여지게 함

  });