完美解决移动端H5页面的滑动穿透问题
我的个人网站：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页面的滑动穿透问题的更多相关文章
- 移动端H5页面惯性滑动监听
移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 解惑好文：移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 教你如何用 lib-flexible 实现移动端H5页面适配
前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
- 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml
机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...
- 移动端h5页面的设计稿尺寸
当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...
- vue移动端h5页面根据屏幕适配的四种方案
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- 移动端H5页面开发，碰到一个字体变大的BUG
移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...
随机推荐
- java架构之路-（SpringMVC篇）SpringMVC主要流程源码解析（上）源码执行流程
做过web项目的小伙伴,对于SpringMVC,Struts2都是在熟悉不过了,再就是我们比较古老的servlet,我们先来复习一下我们的servlet生命周期. servlet生命周期 1)初始化阶 ...
- Python 正则re匹配中文、英式数字
#coding:utf-8 import re s = u''' 或多或少的好好读书电锯惊魂20202 和水电费后是否会时候1212没收到风10.12海大富的是粉红色的和办法的1244525.000 ...
- 为什么要学习go语言
终于等到你!Go语言--让你用写Python代码的开发效率编写C语言代码. 为什么互联网世界需要Go语言 世界上已经有太多太多的编程语言了,为什么又出来一个Go语言? 硬件限制:摩尔定律已然失效 摩尔 ...
- Spark 学习笔记之 Streaming Window
Streaming Window: 上图意思:每隔2秒统计前3秒的数据 slideDuration: 2 windowDuration: 3 例子: import org.apache.kafka.c ...
- spring boot项目下application.properties中使用logging.path和logging.file时的细节
logging.path仅仅用于指定日志输出的目录,且不能指定输出的文件名,且默认名为spring.log 若指定的是相对目录,则会生成在当前总项目的目录下 idea中新建sprnig boot项目 ...
- ES6——新增数据结构Set与Map的用法
ES6 提供了新的数据结构 Set以及Map,下面我们来一一讲解. 一.Set 特性 似于数组,但它的一大特性就是所有元素都是唯一的,没有重复. 我们可以利用这一唯一特性进行数组的去重工作. 1.单一 ...
- 纯C语言写的按键驱动，将按键逻辑与按键处理事件分离~
button drive 杰杰自己写的一个按键驱动,支持单双击.连按.长按:采用回调处理按键事件(自定义消抖时间),使用只需3步,创建按键,按键事件与回调处理函数链接映射,周期检查按键. 源码地址:h ...
- Spring Boot2 系列教程(十二)@ControllerAdvice 的三种使用场景
严格来说,本文并不算是 Spring Boot 中的知识点,但是很多学过 SpringMVC 的小伙伴,对于 @ControllerAdvice 却并不熟悉,Spring Boot 和 SpringM ...
- Kotlin 中的伴生对象和静态成员
用了一段时间kotlin,越用越觉得好用,爱不释手啊,留点笔记. Kotlin 中,在类中定义的对象(object)声明,可使用 companion 修饰,这样此对象(object)就是伴生对象了.类 ...
- Python历史+优缺点+应用领域+网站职位简介
一.Python的历史 1. 1989年圣诞节:Guido von Rossum开始写Python语言的编译器.2. 1991年2月:第一个Python编译器(同时也是解释器)诞生,它是用C语言实现的 ...