スマートフォンでスクロールを禁止にする

スマホサイトでローディング画面を表示させる機会があったのですが、position: fixed;で画面全体に要素を表示させていた時にスクロールすると下部に隙間ができてしまうことがあったので、対応した方法をメモしておきます。

対応前

対応前に行っていた実装です。

HTML

<div class="loading_box">
	<p>ローディング</p>
	<button class="close">閉じる</button>
</div>

CSS

.loading_box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #666666;
}

JavaScript

$(function() {
	$('.close').on('click', function() {
		$('.loading_box').hide();
	});
});

ローディングが出ている状態で下にスクロールすると、アドレスバーやツールバーが非表示になった分？下部に隙間ができていました。
対応前のデモページ
　

対応方法

最初に試してみてうまくいかなかった方法です。

JavaScript

$(function() {
	$('html,body').css({
		'overflow': 'hidden'
	});
	$('.close').on('click', function() {
		$('.loading_box').hide();
		$('html,body').removeAttr('style');
	});
});

htmlとbodyにoverflow: hidden;を指定すればスクロールできなくなるかと思いましたが、うまくいきませんでした。
うまくいかなかった場合のデモページ
　

最終的に、touchmoveイベントを使ってスクロールをキャンセルさせるようにしました。

JavaScript

$(function() {
	$(window).on('touchmove.noScroll', function(e) {
		e.preventDefault();
	});
	$('.close').on('click', function() {
		$('.loading_box').hide();
		$(window).off('.noScroll');
	});
});

対応後のデモページ
　

【参考サイト】

• iOSはoverflow:hidden;でスクロールを無効にできない – Qiita