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)
        }
  • 相关阅读:
    Linux驱动之Framebuffer子系统基础知识
    C/C++语言常见面试题汇总
    转载-Linux驱动面试题汇总
    nginx服务在html中嵌入php代码无法显示问题
    关于strsep函数以及联想
    system替代函数
    system问题总结记录
    C语言-判断文件是否存在
    vue常见表单信息收集
    sublime 设置格式化快捷键
  • 原文地址:https://www.cnblogs.com/jf-67/p/10304036.html
Copyright © 2011-2022 走看看