滚动穿透问题

  众所周知,移动端有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)
    }

猜你喜欢

转载自www.cnblogs.com/jf-67/p/10304036.html