web関連

スマホメニューを押した後スマホの背景が動く件

2018/12/21

2018/12/14

スマホメニューを押した後スマホの背景が動く件

ハンバーガーメニューを押したらメニューが出てきて、スクロールすると背景も一緒に動くのが気に食わなくて背景を固定させようと調べていたらいろいろわかって結局できなかった時の備忘録

「PreventDefault」が使えない?

なんかスマホのスクロールを禁止するコードで「PreventDefault」を使っていたみたいだけど、仕様が変わったみたいで「PreventDefault」使えなくなったみたいで、エラーが出るようになってた。
「PreventDefault」を使うためには「passive:true」をする必要性があるみたいで参考記事を見ながら作ったコード↓

$(function() {
    function scroll_control(event) {
        event.preventDefault();
    }
    function no_scroll(){
        document.addEventListener("mousewheel", scroll_control, {passive: false});
        document.addEventListener("touchmove", scroll_control, {passive: false});
    }
    function return_scroll(){
        document.removeEventListener("mousewheel", scroll_control, {passive: false});
        document.removeEventListener('touchmove', scroll_control, {passive: false});
    }

    var state = false;
    $('#ボタン').click(function() {
        if(state == false) {
            no_scroll();
            console.log("開いたよ");
            state = true;

        }else{
            return_scroll();
            console.log('閉じたよ');
            state = false;
        }
    });
});

#ボタンを押したらスクロール禁止にする

▼コード参考
https://goo.gl/4Y2H9Y

▼passive周り参考
http://kimizuka.hatenablog.com/entry/2017/06/05/111634

▼preventDefault(); が動作しない理由とかが動かない理由書かれてた
https://qiita.com/shge/items/d2ae44621ce2eec183e6

結局一部スクロールさせて他はスクロール禁止できねー、とりあえず一部だけスクロールできるようにしたいんだけど調べても出てこない

▼近いのがこの記事
https://qiita.com/noraworld/items/2834f2e6f064e6f6d41a

以下は「passive」が使えるかどうかのコードらしい(メモ)

/* "passive" が使えるかどうかを検出 */
var passiveSupported = false;
try {
    document.addEventListener("test", null, Object.defineProperty({}, "passive", {
        get: function() {
            passiveSupported = true;
        }
    }));
} catch(err) {}

/* リスナーを登録 */
document.addEventListener('touchstart', function listener(e) {
    /* do something */
    e.preventDefault();
}, passiveSupported ? { passive: false } : false);
document.addEventListener('touchmove', function listener(e) {
    /* do something */
    e.preventDefault();
}, passiveSupported ? { passive: false } : false);

▼参考
http://nagix.hatenablog.com/entry/2018/05/05/041949

 

わかる様になったら、再度修正してくれることを祈って未来の自分に託す