【jQuery】bodyのスクロールを止める（レスポンシブ）

HTML/CSS JavaScript jQuery

モーダルやメニューなどをライトボックス風に画面全体にオーバーレイ表示した時、
裏になったコンテンツ（<body>全体）をスクロールできないよう固定したい。

<body>を position:fixed にする方式で、PC・スマホ両対応できる。
最もシンプルなパターンで縦スクロールだけ対応すればよい場合、次のような関数を作って、

function bodyFreeze(){
    if( $('body').css('position') === 'fixed' ) return;
    var scrTop = $(window).scrollTop();
    $('body').css({ position:'fixed', top:-scrTop }).data('scrTop', scrTop);
}
function bodyRelease(){
    if( $('body').css('position') !== 'fixed' ) return;
    var scrTop = $('body').css({ position:'', top:'' }).data('scrTop');
    $(window).scrollTop(scrTop);
}

オーバーレイを表示する時に bodyFreeze 実行。

bodyFreeze();

オーバーレイを終了する時に bodyRelease 実行。

bodyRelease();

スクロールバーが出たり消えたりしてガクッとなるのがイヤな場合は、<html> か <body> に overflow-x: scroll / overflow-y: scroll を入れると回避できる。ページのつくりによるが、例えば必ず縦スクロールになるほど縦長で、横スクロールがないページなら、最初から overflow-y: scroll を入れておけばよい。

横スクロールバーの対応はおなじ考え方でいけるだろう・・

この方式の欠点は、iPhone/Safariだと画面上下のアドレスバーやメニューバーが出現してしまうので表示領域が狭くなること。。