2016.10.05

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

Category: JavaScript / jQuery

Tags,

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

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);
}

関連リンク

Category : JavaScript / jQuery