JavaScriptを使ってiOSでスクロールできないようにする

以前iOSでスクロールできないようにする記事を投稿しましたが、iOS10でうまくいかないことがあったので、別の対応方法を試してみました。

サンプルコード

モーダルを表示した時だけスクロールできないようにしてみます。

HTML

<button class="modal-link" data-modaibody="modal">モーダル表示</button>

<div class="modal-bg"></div>
<div class="modal-contents">
	<button class="modal-close">閉じる</button>
	<p>モーダルの中身です。</p>
</div>

要素にclassを追加して表示・非表示を切り替える形ですが、CSSは今回の内容と関係ないので紹介は省略します。

JavaScript

$(function() {
	$('.modal-link').on('click', function() {
		$('.modal-bg').addClass('is-show');
		$('.modal-contents').addClass('is-show');

		// タッチイベントを解除
		$(window).on('touchmove.is-fixed', function(e) {
			e.preventDefault();
		});
	});
	$('.modal-close').on('click', function() {
		$('.modal-bg').removeClass('is-show');
		$('.modal-contents').removeClass('is-show');

		// タッチイベントを復帰
		$(window).off('.is-fixed');
	});
});

コメントにも書いているタッチイベントの制御部分で、モーダルを開いた時にはタッチイベントでスクロールしないように、モーダルを閉じた時に解除するようにしています。

スクロールできないようにするとき

$(window).on('touchmove.is-fixed', function(e) {
	e.preventDefault();
});

スクロールできるようにするとき

$(window).off('.is-fixed');

これで意図したタイミングでスクロールさせないようにすることができました。
iOSでスクロールできないようにするデモページ