iphoneでスクロールをさせない処理をする


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()することができます。

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*