完美解决移动端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: ...
随机推荐
- 如果有人问你 JFinal 如何集成 EhCache，把这篇文章甩给他
废话不多说,就说一句:在 JFinal 中集成 EhCache,可以提高系统的并发访问速度. 可能有人会问 JFinal 是什么,EhCache 是什么,简单解释一下. JFinal 是一个基于Jav ...
- python——pyinstaller踩的坑 UnicodeDecodeError
程序本身运行没任何毛病,奈何用pyinstaller -w xx.py的时候提示——UnicodeDecodeError: 'ascii' codec can't decode byte 0xb3 i ...
- 02-35 scikit-learn库之支持向量机
目录 scikit-learn库之支持向量机 一.SVC 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.LinearSVC 三.NuSVC 四.LinearSVR ...
- Redis 介绍学习
1.Redis 简介 Redis 是一个支持数据结构更多的键值对数据库.它的值不仅可以是字符串等基本数据 类型,也可以是类对象,更可以是 Set.List.计数器等高级的数据结构. Memcached ...
- T4 模板
T4模板入门 T4,即4个T开头的英文字母组合:Text Template Transformation Toolkit.T4(Text Template Transformation Toolkit ...
- SSH服务协议
1.SSH介绍: SSH 是Secure Shell Protocol 的简写,由IETF网络小组(Network Working Group)制定:在进行数据传输之前,SSH先对联机数据包通过加密技 ...
- SEER见证人操作指南
SEER的见证人设计 共识方式 在区块生产者的产生方式上,SEER采取了PoS的共识方式,用户通过智能合约抵押自己持有的SEER竞选主力见证人(区块生产者). 对于SEER区块链来说,制约区块链TPS ...
- 项目开发---使用node.js中sass语法
前言:本文中所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. 一.sass插件的安装: gulp-sass-china // ...
- Flyway 助力数据库脚本自动化管理攻略
原文地址:梁桂钊的博客 博客地址:http://blog.720ui.com 欢迎关注公众号:「服务端思维」.一群同频者,一起成长,一起精进,打破认知的局限性. 今天,探讨一个有趣的话题:我们可以通过 ...
- 算法---区间K大数查找 Java 蓝桥杯ALGO-1
import java.util.Arrays; import java.util.Scanner; public class Main { public static void main(Strin ...