[jQuery+css]ページ内スクロールを禁止したり解除したりするギミック

別記事内で書いてたけど探すのめんどいから独立記事にする。

css
jQuery
使い方
注意点とか

css

body{
    &.scroll-lock{
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom:0px;
    }
}

jQuery

function bodyScrollLock(){
    var scrollHeight = window.scrollY;
    $('body').toggleClass('scroll-lock');
    if($('body').hasClass('scroll-lock')){
        $('body').css('top',-(scrollHeight));
    }else{
        var scrollPosition = $('body').css('top').replace(/[^0-9]/g, '');
        $(window).scrollTop(scrollPosition);
        $('body').css('top','');
    }
}
function bodyScrollUnlock(){
    $('body').removeClass('scroll-lock');
    var scrollPosition = $('body').css('top').replace(/[^0-9]/g, '');
    $(window).scrollTop(scrollPosition);
    $('body').css('top','');
}

使い方

オンオフのタイミングはそれぞれきちんと作る。
引数とか入れてないから関数を書けばOK。

$(function(){
    $('button').on('click',function(){
        if($('body').hasClass('scroll-lock')){
            bodyScrollUnlock();
        }else{
            bodyScrollLock();
        }
    })
})

注意点とか

特にないけどbodyにスタイルを突っ込みまくってるので干渉するようなものがあったら調整しないと変なことになる。

動作自体は珍しくない。
当記事みたいにclassを使わずに、bodyに直接styleを全部入れ込んでるパターンもある。

それはそれでいいんだけど、でもやっぱり干渉するなにかがあるとやばいから、直接書き込むことは避けたいというのが心情。topだけ仕込んでるけど本当はこれもやめたい。怯えすぎではあるんだけどね。

使い始めて数年経っても実害にあったことがないので杞憂だと思う。