Web production note

　【更新日 : 】

【jQuery】スマホでbodyを固定してスクロールさせないようにする関数

Category：
jQuery
Tags：
,

※通常のJavaScript（jQueryなし）で実装したアップデート版を公開しました。

【JavaScript】bodyのスクロールを停止する機能を実装する

【JavaScript】bodyのスクロールを停止する機能を実装する

Vanilla JSでbodyのスクロールを停止するメソッドを実装したサンプルです。メニューやモーダル展開時などに利用できます。 オブジェクト版 codepen See the P…

スマホでモーダルやメニュー等を開いた時に背景がスクロールしてしまうのを防ぐ関数のサンプルです。

jQuery(document).ready(function($){
	//body固定関数
	var bodyElm = $('body');
	var scrollPosi;
	function bodyFix() {
		scrollPosi = $(window).scrollTop();
		bodyElm.css({
			'position': 'fixed',
			'width': '100%',
			'z-index': '1',
			'top': -scrollPosi
		});
	}
	
	//body fixリセット
	function bodyFixReset() {
		bodyElm.css({
			'position': 'relative',
			'width': 'auto',
			'top':'auto'
		});
		//scroll位置を調整
		$("html, body").scrollTop(scrollPosi);
	}
});

上記関数をメニューやモーダル開閉アクションに組み込む事で、背後のコンテンツのスクロールを防止する事ができます。

body fixリセット関数はbodyに他の操作を当てていないのであれば、以下のようにremoveAttrで大丈夫だと思います。

//body fixリセット
function bodyFixReset() {
	bodyElm.removeAttr('style');
	//scroll位置を調整
	$("html, body").scrollTop(scrollPosi);
}

関連リンク