모바일웹에서 사이드 메뉴 열 때, 메뉴만 스크롤 되도록 만들기

검색을 해보니, 스크롤 자체를 아예 막아버리는 코드들 밖에 없어서..

한참 고민하다가 딱 떠오른 생각에 해 보니 잘 된다.

일단은, 안드로이드 넥서스5에서만 체크 완료.

1. 모바일 사이드 메뉴

<div id="mbl_leftside" style="display:none; position:absolute; width:240px; height:auto; max-height:100%; overflow:auto; z-index:5; background-color:#fff;"></div>

2. 사이드 메뉴 열기 스크립트

<script>

  $('#mbl_leftside').fadeIn();

  $("body").css('overflow','hidden').css('display','fixed');

</script>

3. 사이드 메뉴 닫기 스크립트

<script>

  $('#mbl_leftside').fadeOut();

  $("body").css('overflow','').css('display','');
</script>

참고로, 구글링으로 검색했던 코드.

$("body").css({overflow:'hidden'}).bind('touchmove', function(e){e.preventDefault()});

$("body").css({ overflow: '' }).unbind('touchmove');