zoukankan      html  css  js  c++  java
  • 滚动穿透问题

      众所周知,移动端有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)
        }
  • 相关阅读:
    Go 解析JSON
    查看端口占用并结束进程
    DNS
    u盘禁用
    主机规划与磁盘分区
    响应式设计初识
    SVG基础
    BootStrap入门
    python中 "is"和"=="的区别
    关于C++模板不能分离编译的问题思考
  • 原文地址:https://www.cnblogs.com/jf-67/p/10304036.html
Copyright © 2011-2022 走看看