滾動穿透問題

　　衆所周知，移動端有fixed遮罩或彈出層時，屏幕上滑動，後面的背景也會跟着滾動，強迫症的我老是以爲不舒服。然而也沒有找到完美的解決方法。

　　這裏說說兩種能用的方法。

　　一、遮罩或彈層沒有滾動的內容時：

　　vue裏提供了一個很好用的解決辦法：@touchmove.prevent

　　若是不用vue的話，那就監聽touchmove事件，而後阻止事件的默認行爲（e.preventDefault()）

 

　　二、當遮罩或彈層裏有能夠滾動的內容時，上面的方法就不行了。

　　這時候的解決思路就是，點擊彈出遮罩時，獲取下當前文檔滾動條的位置，而後設置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)
    }