スマホでスクロールを禁止させる方法

, , ,

軽めのjQuery Advent Calendar 2012の24日目の記事です!

PCサイトでスクロールを禁止させるには、bodyoverflow: hidden;をかければスクロールができなくなるが、スマホサイトでは、一部Android端末では効くが、iOSではスクロールができてしまいます。

スマホでスクロールを止めるには、jQueryを使うと便利です。

スマホの独自イベントである、touchmoveイベントを切ればスクロールを止めることができます。

方法は下記のとおりです。


$(window).on('touchmove.noScroll', function(e) {
    e.preventDefault();
});

あるタイミングでスクロールさせたくなったら、off()すればいい。


$(window).off('.noScroll');

イベント名に、.noScrollとあるが、これはイベントに名前をつけていることになります。

名前を付けることにより、もし他の箇所でtouchmoveイベントを使っていたとしても、他のtouchmoveイベントまでイベントをoff()することなく、.noScrollの名前が付けられたイベントのみoff()することができる。

プラグインの中でイベントを使用している場合など、他のjQueryの処理に依存することないので、こういった処理を挟んでおくことをおすすめします。

軽めなのでこのくらいのボリュームで!