我的个人网站：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. 阿里云ECS服务器提示需要修复的漏洞问题

    1.漏洞: RHSA-2018:1842: kernel security, bug fix, and enhancement updateRHSA-2018:2299: NetworkManager ...

  2. .NET Core 3.0 可卸载程序集原理简析

    因为最近在群里被问到如何理解 .NET Core 3.0 可卸载程序集,所以就写了这篇简单的分析. 因为时间实在很少,这篇文章只简单的罗列了相关的代码,请配合官方说明文档理解. 另外,书籍<.N ...

  3. 如何增强VR的vection/self-motion？

    上一节讲到了vection是给玩家带来“移动感”的因素,它提供良好VR体验的关键之一.那么VR中我们一般用哪些方式来提供vection呢?1 首先来简单了解一下人体和空间相关的感知机制. 视觉线索 v ...

  4. python 写入txt的新方法

    最新发现有新方法可以对txt等进行操作,比较有意思,之前没见过,故记录下 传统方法 with open(ur'D:\Desktop\a123.txt', 'a') as f: #以写的方式打开 f.w ...

  5. 色即是空，空即是色---java有关null的几件小事

    故事背景 ---摩诃般若波罗蜜多心经: 观自在菩萨,行深般若波罗蜜多时,照见五蕴皆空,度一切苦厄.舍利子,色不异空,空不异色:色即是空,空即是色.受想行识,亦复如是.舍利子,是诸法空相,不生不灭,不垢 ...

  6. day 21作业

    目录 一.定义一个类:圆形,该类有半径,周长,面积等属性,将半径隐藏起来,将周长与面积开放 二.使用abc模块定义一个phone抽象类 并编写一个具体的实现类 一.定义一个类:圆形,该类有半径,周长, ...

  7. python编程基础之二十三

    集合:和数学里面完全一样的,不允许有重复元素,如果添加重复元素,就会被过滤,可以进行交并差的运算  集合是可变对象 本质:无需且无重复的数据结构 创建集合 s1 = set()  括号里面可以放可迭代 ...

  8. Int类的129为什么转成byte就变成-127了？

    作为一个java开发人员,接触的基本都是上层的,都是以应用为主,根据业务实现功能,但今天无意间发现了一个小问题,int类型的129转成byte类型变成了-127,我知道是因为位数截取的原因,但是还没有 ...

  9. web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝

    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...

  10. ES6入门之let和const命令

    前言 大家好,我是一只流浪的kk,当你看到这边博客的时候,说明你已经进入了ES6学习的领域了,从本篇博客开始,我将会将自己学习到ES6的相关知识进行整理,方便大家参考和学习,那么我将带你进入第一节的内 ...