jquery를 이용해서 스크롤하지 못하게 하는 방법

문서의 어느 부분을 보고있건 상관없이 스크롤을 금지하고 허용하려면 다음과 같이 하면 된다.



For desktop:


1. 스크롤바를 하나 둔다.
<div id="scrollbar"></div>

<style>
  #scrollbar {
    position: fixed; top: 0; right:0; height: 100%;
    overflow-y: scroll;
    display: none;
    opacity:0.5;
  }
</style>




2. <body>가 스크롤이 금지되면 빨갛게 표시되도록 하자. <body>는 처음에는 스크롤이 가능하다. (스크롤 금지 = off 이다).
<style>
  body.on { background-color:red; }
</style>

$(document).ready(function() {
  var container = $('body').addClass('off');
 ...
}




3. <html>이 클릭될 때마다 스크롤을 금지하거나 허용한다.
$(document).ready(function() {

  $('html').on('click', function(){
    if(container.hasClass('off')){
      var bw = $('body').width();
      var sw = $('#scrollbar').width();
      var wh = $(window).height();
      var dh = $(document).height();
      container.toggleClass('on off');
      $('body').css('overflow', 'hidden').width( bw-sw );
      if( wh < dh )
        $('#scrollbar').show();
    }
    else if(container.hasClass('on')){
      container.toggleClass('on off');
      $('#scrollbar').hide();
      $('body').css('overflow', '').css('width', '');
    };
  });
});







For mobile:


간단하다. 터치이벤트를 다 먹어 치운다.

  $('body').bind('touchmove', function(e) {
      e.preventDefault();
  });

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