TIP게시판

제목 모바일웹에서 사이드 메뉴 열 때, 메뉴만 스크롤 되도록 만들기
글쓴이 하늘치 작성시각 2015/12/09 20:52:01
댓글 : 2 추천 : 0 스크랩 : 0 조회수 : 22548   RSS
구글링으로 열심히 찾아보니, 딱 두 가지가 나오더군요.

첫 번째는 아래 코드..
  
$("body").css({overflow:'hidden'}).bind('touchmove', function(e){e.preventDefault()});
$("body").css({ overflow: '' }).unbind('touchmove');


근데, 이건 모든 스크롤을 다 막아버려서 안되겠고..

두 번째는 iscroll 을 쓰라는 것이었는데, 이건 뭐 잘 모르겠더라고요.



그래서 고민하다가 혹시나 하는 생각에 해봤더니 잘 되길래 올려봅니다.
참고로, 제 폰은 넥서스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>




다른 폰은 아직 확인을 못해봤네요.
내일 더 확인해보고 댓글 달아 올리겠습니다.


 
 다음글 PHP 7.0.0과 MySQL 5.7.10 올려봤네요. (3)
 이전글 다국어 처리에 대한 제가 적용한 방식입니다. (1)
목록

댓글

한대승(불의회상) / 2015/12/10 09:40:02 / 추천 0
좋은 정보 감사 합니다. 
김치겸 / 2016/01/13 14:12:46 / 추천 0

좋은정보네요. 열기일때 display가 아니라 position으로 하면 완벽할것 같습니다.

혹은 css로 .m_menu{overflow:hidden; position:fixed;}한 후에

메뉴열기에 addClass('m_menu');

닫기에 removeClass('m_menu'); 해도 좋을거 같습니다.