我的个人网站：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基础之和String相关的一些转换

      String虽然不是java的基本数据类型,但使用的频率却非常之高,可以说是很常见了. 列举几个常见的关于String的转换,写的有点过于简洁,欢迎纠错和补充   1.Object和String的 ...

  2. 夯实Java基础系列11：深入理解Java中的回调机制

    目录 模块间的调用 多线程中的"回调" Java回调机制实战 实例一 : 同步调用 实例二:由浅入深 实例三:Tom做题 参考文章 微信公众号 Java技术江湖 个人公众号:黄小斜 ...

  3. 夯实Java基础系列17：一文搞懂Java多线程使用方式、实现原理以及常见面试题

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  4. Java 学习笔记之 父子类Synchronized

    父子类Synchronized: 我们通过一个例子来验证下,父类和子类的Synchronized方法被同时调用,是否是同步的. public class FatherClass { synchroni ...

  5. JNA的步骤、简单实例以及资料整理

    1.步骤 1.编写dll文件,放入项目的bin目录(在window上是dll文件,在Linux上是so文件,dll和so都是由C程序生成)  2.新建接口继承Library  3.加载对应的dll或者 ...

  6. Tomcat7.0.40注册到服务启动报错error Code 1 +connector attribute sslcertificateFile must be defined when using ssl with apr

    Tomcat7.0.40 注册到服务启动遇到以下几个问题: 1.启动报错errorCode1 查看日志如下图: 解决办法: 这个是因为我的jdk版本问题,因为电脑是64位,安装的jdk是32位的所以会 ...

  7. 02-35 scikit-learn库之支持向量机

    目录 scikit-learn库之支持向量机 一.SVC 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.LinearSVC 三.NuSVC 四.LinearSVR ...

  8. js 判断对象是否为空

    利用JSON.stringify var objData = {};JSON.stringify(objData) ==="{}" // true 第二种用原声js 方法 Obje ...

  9. html隐写术，使用摩尔兹电码/莫尔兹电码存储信息 水波纹样式 Morse code

    html水波纹样式,源码直接下载,代码有注释教程,小白可以看懂. 动画啥的都做好了,效果我觉得还不错 网上文章看到xbox 工程师使用隐写术,在界面的右下角放上了含有用户激活码的水波纹样式,一般人还真 ...

  10. cobalt strike笔记-常用beacon扫盲

    最近还是重新补一下cs的东西 0x01 Beacon命令 Beacon Commands =============== Command Description ------- ----------- ...