Javascriptでスクロールを一時的に禁止する方法（PC・スマホ対応）

posts_photo

Photo by フリー写真素材ぱくたそ

今回紹介するのはJSでスクロールを一時的に禁止する方法です。
以外と使う機会多いんですよね。
「このライトボックスを開いた際はページのスクロールは止めたい…」
「このスマホサイト、このメニューを開いた場合はスクロールされないようにしたい」
「または、全体はスクロール禁止で指定オブジェクトのみスクロールさせたい」
制作しているとこんな要望を聞くことがたまにあります。
やり方忘れた頃にぽろぽろと出現するのでメモしておこうと思います。

ちなみに生のJSで書くのは手間なのでjQueryは使います。

スクロールイベントを取得して何もしなければいい

やり方は単純で、mousewheelやtouchmoveとかに”何もしないイベント”を追加すればいいのです。
PCは色々あるマウスホイールイベントをまとめて指定、スマホの方はtouchmoveにスクロール禁止のイベントを追加しています。
厳密にはスクロールを禁止しているというより、スクロールさせるためのイベント類に”何もしない”を上書きしている状態となります。

$(function(){

//スクロール禁止用関数
function no_scroll(){
//PC用
var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).on(scroll_event,function(e){e.preventDefault();});
//SP用
$(document).on('touchmove.noScroll', function(e) {e.preventDefault();});
}

//スクロール復活用関数
function return_scroll(){
//PC用
var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(document).off(scroll_event);
//SP用
$(document).off('.noScroll');
}

});

スクロールを禁止にしたい場合は禁止用関数を呼び出し、解除する際には復活用の関数を呼び出すようにすると使いやすいかと思います。
今回の記事ではPCとスマホをひとつの関数にまとめましたが、用途に応じて分けると良いでしょう。

【参考ページ】
jQueryでマウスホイールの上下イベントを取得＋余韻をつけたイージングスクロールを実装する実験
 jQueryでスマホのスクロールイベントを無効化する

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
-Amazonで見る