滚动穿透问题

　　众所周知，移动端有fixed遮罩或弹出层时，屏幕上滑动，后面的背景也会跟着滚动，强迫症的我总是觉得不舒服。然而也没有找到完美的解决方法。

　　这里说说两种能用的方法。

　　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)
    }