CSSの解説

bodyタグにoverflow: hidden;を指定することによってスクロールを無効にすることができます。
以下のコードは.no_scrollクラスをJavaScriptで追加・削除することによってスクロールする・しないを分けるための記述になります。

CSS
コピー
body.no_scroll{
   overflow: hidden;
}

JavaScriptの解説

JavaScript
コピー
$('#off').on('click', function(){
   $('body').addClass('no_scroll');
});
 
$('#on').on('click', function(){
   $('body').removeClass('no_scroll');
});

1行目 | id=”off”をクリックした時

bodyタグに.no_scrollを追加するとoverflow: hidden;が当てられるのでスクロールを無効にできます。

5行目 | id=”on”をクリックした時

bodyタグから.no_scrollを削除するとoverflow: hidden;が外れるのでスクロールを有効にできます。