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)
        }
  • 相关阅读:
    MySql基础-1
    ClearSilver模板编程概述_转
    ehcache memcache redis 三大缓存男高音_转
    memcached完全剖析--1. memcached的基础 _转
    小组的创建
    现代软件工程 第7-9章作业
    现代软件工程 第3~6章作业
    现代软件工程作业 第二章 Github的使用
    现代软件工程作业-- GitHub的学习
    现代软件工程作业 GitHub的学习
  • 原文地址:https://www.cnblogs.com/jf-67/p/10304036.html
Copyright © 2011-2022 走看看