我的个人网站：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. 【SQL基础】char，nchar，vchar,nvchar之间的区别

    (1)       定义: char:    固定长度,存储ANSI字符,不足的补英文半角空格. nchar:   固定长度,存储Unicode字符,不足的补英文半角空格 varchar:  可变长度 ...

  2. 蓝松短视频SDK支持AE模板, 可做类似微商视频, 小柿饼的效果等

    AE模板: 是指设计师用Adobe After Effect做好各种视频动画,比如炫酷视频,文艺/搞笑的场景,相册效果等,根据我们的指导文件导出.蓝松SDK会解析导出的文件,自动还原成AE设计时的动画 ...

  3. .net core中使用Bumblebee架设微服务网关

    Bumblebee是款基于.net core开发开源的http服务网关,经过最近版本的完善在功能足以满足作为微服务网关的需要.在微服务网关功能中它提供了应用服务负载,故障迁移,安全控制,监控跟踪和日志 ...

  4. MongoDB 学习笔记之 地理空间索引入门

    地理空间索引: 地理空间索引,可用于处理基于地理位置的查询. Point:用于指定所在的具体位置,我们以restaurants为例: db.restaurants.insert({name: &quo ...

  5. webpack loader实现

    正值前端组件化开发时代,那么必然离不开目前最火的构建工具--webpack(grunt,gulp等暂且不谈).说到这里,刚好有几个问题: 为什么运行打包命令之后,.vue 文件可以转成 .js 文件 ...

  6. PHP高效产生m个n范围内的不重复随机数（m<=n)

    该算法非常巧妙的取随机数的位置(数组的下标),替代取随机数本身,每次取到一个随机数之后,就将其在取值范围中排除,下一次仅会在剩下的数字中取,一次遍历就可以完成随机数的选取,效率相当高. functio ...

  7. 为什么那么多自学JAVA的后来都放弃了？总结起来就这些原因

    目前信息化产业发展势头很好,互联网就成为了很多普通人想要涉及的行业,因为相比于传统行业,互联网行业涨薪幅度大,机会也多,所以就会大批的人想要转行来学习Java开发. 目前来讲市场上需要的Java人员非 ...

  8. Redis原理篇

    Redis原理篇 1.发布 订阅模式 1.1列表 的局限 ​ 前面我们说通过队列的 rpush 和 lpop 可以实现消息队列(队尾进队头出),但是消费者需要不停地调用 lpop 查看 List 中是 ...

  9. 代码审计-四叶草杯线下awd比赛源码web2

    今晚简单来看看那天比赛的源码吧,比赛的时候还是有些慌没有好好去静下心看代码. awd给的题中的漏洞,都是那种可以快速让你利用拿到权限后得到flag的那种,特别复杂利用的一般没有. 建议先黑盒去尝试,例 ...

  10. [插件化开发] Poc之后，我选择放弃OSGI

    Poc之后,我选择放弃OSGI TIPS: 如贵司允许重构老系统或者允许使用OSGI的第三方框架改造所带来的投入成本,并且评估之后ROI乐观,那么还是可以使用的. Runtime Version 以下 ...