スマホ画面のスクロールを禁止する簡単なJQueryコードの紹介

2020年7月3日 2020年7月3日

スマホのメニューやモーダルウィンドウが開いている際に指でスクロールすると、メニューやモーダルウィンドウの下のボディ自体がスクロールされたしまうようなことはありませんか？

別段サイト自体への影響はないのですが、基本的に気持ち悪い感じがしますよね。
大抵のクライアントの方には、ちょっとこれは改善して欲しいと言われる方も少なくないと思います。
それではどのようにすれば、ボディがスクロールされなくなるかその対策方法を紹介していきます。

・スクロールを禁止する簡単なJQueryコード
・スマホ画面のスクロールを禁止する簡単なJQueryコードの紹介まとめ

スクロールを禁止する簡単なJQueryコード

それではどのようにすればいいのかと言いますと、メニューやモーダルウィンドウがアクティブ状態にある時は、bodyを固定してしまうようにJQueryで指定すれば回避できるのです。

bodyを固定するJQueryコードは下記となります。

$(function () {
	var flag = false;

	//menuボタンが押された処理（開閉時）
	$('.menu-btn').on('click', function(){
		if (flag == false) {
			bodyFix(); // bodyを固定させる関数

		　　// その他、ナビを開くときに起きるあれこれを記述
			flag = true;
		}else{
			closeNavi();
			flag = false;
		}
	});

	//モーダルウィンドウなどボタン以外で閉じた処理
	$('.close').on('click', function(){
		closeNavi();
		flag = false;
	});
});
 
//ナビを閉じるときの関数
function closeNavi(){
	bodyFixReset(); // body固定を解除する関数
}
 
//以下、bodyを固定する関数
var bodyElm = $('body');
var scrollPosi;
function bodyFix(){
	scrollPosi = $(window).scrollTop();
	bodyElm.css({
		'position': 'fixed',
		'width': '100%',
		'z-index': '1',
		'top': -scrollPosi
	});
}
 
//以下、body固定を解除する関数
function bodyFixReset(){
	bodyElm.css({
		'position': 'relative',
		'width': 'auto',
		'top': 'auto'
	});
	//scroll位置を調整
	$('html, body').scrollTop(scrollPosi);
}

実装する際に変更が必要な箇所は、5行目のクリックイベントの部分です。
ご自身の作成してるボタンのクラス名やID名に、変更していただければと思います。

またモーダルウィンドを使用する際には、17行目から21行目も併せて記述してください。
ボタン以外の箇所で、モーダルウィンドウを閉じる場合に必要となります。クリックイベントの部分には、モーダルウィンドウを閉じるイベントを発生させるための部分について、ご自身で付けたクラス名やID名を指定してください。

このようにJQueryで処理をすることによって、特定の条件化でスマホ画面のスクロールを禁止することができるのです。