スクロールスルーの問題

2322 ワード

周知のように、移動端にfixedマスクやポップアップ層がある場合、スクリーンがスライドし、後ろの背景もスクロールし、強迫症の私はいつも気分が悪い.しかし、完璧な解決策も見つからなかった.
ここでは2つの使える方法について話します.
1.マスクまたは弾層が転がっていない場合:
vueでは@touchmove.prevent
vueを使用しない場合はtouchmoveイベントを傍受し、イベントのデフォルト動作を阻止します(e.preventDefault()
 
2、マスクや弾層に転がるような内容がある場合は、上記の方法ではいけません.
この場合の解決策は、ポップアップマスクをクリックすると、現在のドキュメントのスクロールバーの位置を取得し、bodyがスクロールできないように設定することです.ポップアップレイヤを閉じると、リカバリページがスクロールされ、マスクがイジェクトされたときの位置にスクロールされます.たとえば.
let h = ''
//       
    $(".xieyi span").click(function () {
        h=$(document).scrollTop();
        $(".graybg-yuzhuce,.xieyitip").show();
        bodyNotScroll();
    })


// body    
    function bodyNotScroll() {
        h = $(document).scrollTop();
        $("body,html").css('overflow-y', "hidden");
        $("body,html").css('height', "100%");
        $("body").scrollTop(h);
    }

//       
    $(".xieyitip span").click(function(){
        $(".graybg-yuzhuce,.xieyitip").hide();
        reset()
    })

    function reset() {
        $("body,html").css('overflow-y', "auto");
        $("body,html").css('height', "auto");
        $("body").scrollTop(h)
    }