備忘録

スマホのアコーディオンメニューで、縦に長くなった場合、メニューをスクロールできると同時に、バックのスクロールは動作しないようにする

fixedでメニューを表示すると、bodyの位置が0になるため、スマホではメニューを表示すると、メニューの下にある画面はスクロールした位置から元の位置へ移動する。

fixedでメニュー表示しても、下の画面もスワイプすると動作してスクロールする。bodyをhiddenで固定して動かないようにする。

メニューのスクロールは、メニューの親枠に高さを設定して、スクロールをautoで表示させる。

    var currentScroll;//画面の位置を保管する変数
    var body = $("body");
    // スマホ用メニュー表示ボタン
    $(".sp_btn_menu img").click(function(){
        var spm_css = $("#sp_menu").css("display");//現在のメニューの状態を取得
        if(spm_css == "block") {//メニューを閉じる
            $("html, body").attr("style", "");//スワイプの動作でスクロールできるようにする
            $("body").scrollTop(currentScroll);//scroll位置を調整
            $("#sp_menu").slideUp("fast");//メニュー閉じる
            $(this).attr('src', $(this).attr('src').replace('_close', '_open'));//メニュー表示ボタンの画像を変更
        } else {//メニューを開く
            //メニュー表示時に後ろの画面が元表示の位置にとどまるようにする
            currentScroll = $(window).scrollTop();
            body.css({
                position: 'fixed',
                width: '100%',
                top: -1 * currentScroll
            });
            $("html").css("overflow", "hidden");//スワイプで後ろが動かないようにする
            var w_h = $(window).height();//画面の縦幅を取得
            $("#sp_menu").show().css("height", w_h - 60);//メニュー表示
            $(this).attr('src', $(this).attr('src').replace('_open', '_close'));//メニュー表示ボタンの画像を変更
        }
    })