我的个人网站：https://m.theeye.tech/

前端交流群：1056993061

同事的分享，记录下来。

代码如下：

css:

body.modal-open {

  position: fixed;

  width: 100%;

}

js:

// 兼容低版本 document.scrollingElement写法

      (function () {

        if (document.scrollingElement) {

          return;

        }

        var element = null;

        function scrollingElement () {

          if (element) {

            return element;

          } else if (document.body.scrollTop) {

            // speed up if scrollTop > 0

            return (element = document.body);

          }

          var iframe = document.createElement('iframe');

          iframe.style.height = '1px';

          document.documentElement.appendChild(iframe);

          var doc = iframe.contentWindow.document;

          doc.write('<!DOCTYPE html><div style="height:9999em">x</div>');

          doc.close();

          var isCompliant = doc.documentElement.scrollHeight > doc.body.scrollHeight;

          iframe.parentNode.removeChild(iframe);

          return (element = isCompliant ? document.documentElement : document.body);

        }

        Object.defineProperty(document, 'scrollingElement', {

          get: scrollingElement

        });

      })();

      var ModalHelper = (function (bodyCls) {

        var scrollTop;

        return {

          afterOpen: function () {

            scrollTop = document.scrollingElement.scrollTop;

            document.body.classList.add(bodyCls);

            document.body.style.top = -scrollTop + 'px';

          },

          beforeClose: function () {

            document.body.classList.remove(bodyCls);

            // scrollTop lost after set position:fixed, restore it back.

            document.scrollingElement.scrollTop = scrollTop;

          }

        };

      })('modal-open');

然后在打开遮罩层的地方添加如下js:

ModalHelper.afterOpen();

在关闭遮罩层的地方添加如下js：

ModalHelper.beforeClose();

这样，你再也不用因为页面的滑动穿透而烦恼啦~

顺便再分享一些关于滚动的优化方法：

1.消除难看的滚动条：在父元素的css添加如下代码

scrollbar-width: none;

::-webkit-scrollbar {display:none}

2.让滚动显得更加流畅：在父元素的css添加如下代码

overflow-y: scroll;

/* 增加弹性滚动,解决滚动不流畅的问题 */

-webkit-overflow-scrolling: touch;

3.补充:虽说穿透解决了，但是ios手机频繁滑动后会出现页面假死的bug，后面使用了以下代码优化了一下：

iosScrollFix: function (className) {

    var startY, startTopScroll;

    var ua = navigator.userAgent.toLowerCase();

    if (/iphone|ipad|ipod/.test(ua)) {

      var temp = document.querySelectorAll(className);

      var tempLen = temp.length;

      for (var i = 0; i < tempLen; ++i) {

        let

          j = i;

        temp[j].addEventListener('touchstart', function (event) {

          startY = event.touches[0].pageY;

          startTopScroll = temp[j].scrollTop;

        }, false);

        temp[i].addEventListener('touchmove', function (event) {

          var startY2 = event.touches[0].pageY;

          if (startTopScroll <= 0 && startY2 - startY > 0) {

            event.preventDefault();

          }

          if (startTopScroll + temp[j].offsetHeight >= temp[j].scrollHeight && startY2 - startY < 0) {

            event.preventDefault();

          }

        });

      }

    }

  }

完美解决移动端H5页面的滑动穿透问题的更多相关文章

  1. 移动端H5页面惯性滑动监听

    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...

  2. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  3. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  4. 解惑好文：移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  5. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  6. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  7. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  8. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  9. 移动端H5页面开发，碰到一个字体变大的BUG

    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...

随机推荐

  1. Java中类加载和反射技术实例

    我们知道一个对象在运行时有两种类型,一个是编译类型,一个是运行时类型.在程序运行时,往往是需要发现类和对象的真实的信息的.那么如何获的这种信息呢? 其一,如果我们在编译和运行时都知道类型的具体信息,这 ...

  2. Flask基础(09)-->请求勾子函数

    什么是请求勾子? 为了让每个视图函数避免编写重复的功能代码,flask提供了通用设施的功能,就是所谓的勾子 那么请求勾子就是,在浏览器请求服务器资源的前后挂载相关的处理函数 请求勾子有什么作用? 作用 ...

  3. 【算法随记五】使用FFT变换自动去除图像中严重的网纹。

    这个课题在很久以前就已经有所接触,不过一直没有用代码去实现过.最近买了一本<机器视觉算法与应用第二版>书,书中再次提到该方法:使用傅里叶变换进行滤波处理的真正好处是可以通过使用定制的滤波器 ...

  4. 虚拟现实研究经典问卷Presence Questionnaire (PQ) 详细介绍

    虚拟现实(VR)是一种沉浸式体验,它的作用就是将用户完全包裹在一个人为构建出的(数字)虚拟世界中,让用户在这个新环境中得到不一样的体验,或完成一些现实中不能完成的任务.所以让体验者相信“我身处此中”非 ...

  5. 面试|简单描述MySQL中，索引，主键，唯一索引，联合索引 的区别，对数据库的性能有什么影响（从读写两方面）

    索引是一种特殊的文件(InnoDB 数据表上的索引是表空间的一个组成部分),它们 包含着对数据表里所有记录的引用指针. 普通索引(由关键字 KEY 或 INDEX 定义的索引)的唯一任务是加快对数据的 ...

  6. kali切换到西电源

    准备研究kali的openvas,打开发现居然没有.apt-get更新一下结果各种报错,换成中科大源.阿里源还是始终报错,气到吐血.最后上西电开源社区换成了西电的kali源,更新速度2m多,一气呵成~ ...

  7. C#基于Quartz.NET实现任务调度并部署Windows服务

    一.Quartz.NET介绍 Quartz.NET是一个强大.开源.轻量的作业调度框架,是 OpenSymphony 的 Quartz API 的.NET移植,用C#改写,可用于winform和asp ...

  8. CocosCreator 快速开发推箱子游戏，附代码

    游戏总共分为4个功能模块: - 开始游戏(menuLayer) - 关卡选择(levelLayer) - 游戏(gameLayer) - 游戏结算(gameOverLayer) Creator内组件效 ...

  9. 秘制CSP模板

    不定期更细中...... 声明1:由于js的问题导致VIEW CODE按钮只能点"I"附近才能展开代码 声明2:为了排版的美观,所有的解释以及需要留意的地方我都放在代码中了 声明3 ...

  10. Spring入门(五)：Spring中bean的作用域

    1. Spring中bean的多种作用域 在默认情况下,Spring应用上下文中所有的bean都是以单例(singleton)的形式创建的,即不管给定的一个bean被注入到其他bean多少次,每次所注 ...