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