我的个人网站：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. setfacl、getfacl

    当用户访问一个文件时,权限匹配的顺序为owner--->group--->other.当设置访问控制列表后,owner--->facl_user--->group---> ...

  2. RedHat安装git报错 expected specifier-qualifier-list before ‘z_stream’

    年初开学的时候认识到了git,因为当时也没装虚拟机甚至是不知道虚拟机这个东西,所以就下载了Windows下的git.当时跟着廖雪峰Git教程 学了几个命令.安装了虚拟机,也学了linux的基本命令后, ...

  3. Webstorm轻松部署项目至服务器

    wo大前端在开发环境下,需要将项目部署到测试环境,webstorm进行基础配置操作就可实现. 一.在Deployment选项下配置远程服务器地址 点击加号,选择type类型,Name自己填,帮你找到这 ...

  4. 快学Scala 第二十课 （trait的构造顺序）

    trait的构造顺序: 首先调用超类构造器 特质构造器在超类构造器之后,类构造器之前执行 特质从左向右被构造 每个特质当中,父特质先被构造 如果多个特质共有一个父特质,而那个父特质已经被构造,则不会被 ...

  5. postgres 数据库 citus 集群分片

    前言 什么时候需要考虑做数据切分? 1.能不切分尽量不要切分 并不是所有表都需要进行切分,主要还是看数据的增长速度.切分后会在某种程度上提升业务的复杂度,数据库除了承载数据的存储和查询外,协助业务更好 ...

  6. 排坑日记之批量从库IO进程停止

    早上刚睁眼,看到了一堆数据库告警的短信,其中一个内容如下: Problem started at 05:02:58 on 2019.10.12 Problem name: Slave is stopp ...

  7. Egret资源跨域问题

    在服务器上配置了允许跨域还不够,还需要在引擎配置允许跨域,不然texture无法在webgl上下文中渲染 会报一个类似于The cross-origin image at 的错误, 只需要在egret ...

  8. 注册中心nacos完整部署及与eureka区别

    1. 场景描述 nacos最近用的比较多,介绍下nacos及部署吧,刚看了下以前写过类似的,不过没写如何部署及与eureka区别,只展示了效果,补补吧. 2.解决方案 2.1 nacos与eureka ...

  9. 数据表管理admin

    知识预览 admin组件使用 admin源码解析 回到顶部 admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你 ...

  10. ES6——新增数据结构Set与Map的用法

    ES6 提供了新的数据结构 Set以及Map,下面我们来一一讲解. 一.Set 特性 似于数组,但它的一大特性就是所有元素都是唯一的,没有重复. 我们可以利用这一唯一特性进行数组的去重工作. 1.单一 ...