完美解决移动端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: ...
随机推荐
- Angular 页面初始化动画
用于进入组件前的加载动画 第一步:index.html 定义动画模板和样式 // 样式 <style type="text/css">.preloader { posi ...
- Error running 'tomcat:run' Cannot run program..CreateProcess error=2,系统找不到指定的文件
Error running 'tomcat:run': Cannot run program "tomcat:run" (in directory "D:\WorkTes ...
- .Net Core 3.0 稳定版发布啦！
上个月的月底(9.23-9.25),.NET 开发者大会开始了,这届大会最主要的议题其实就是微软终于将.NET Core 3.0的面纱揭开了,我们也终于了解到了最新版本的.Net Core平台给我们带 ...
- linux mint 19.2与Windows 10 双系统硬盘安装与卸载
安装linux mint 和win10双系统: 1.win10系统下如果没有空闲分区,请从容量较大的分区用partition manager在选中的较大的分区下,调整大小.此步骤最好在pe下的part ...
- 自己写的Weblogic的poc
""" 暂时只试用于Linux,先试试用一下反弹shell CVE-2017-10271的EXp """ import requests i ...
- Linux内存描述之内存区域zone–Linux内存管理(三)
服务器体系与共享存储器架构 日期 内核版本 架构 作者 GitHub CSDN 2016-06-14 Linux-4.7 X86 & arm gatieme LinuxDeviceDriver ...
- MySQL的索引原理（图解）
数据库的索引原理 0.什么是索引 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能 ...
- Win10系统Cortana 小娜无法搜索
1.在开始菜单中找“Windows PowerShell”文件夹,打开后右键单击Windows PowerShell,选择“以管理员身份运行” 2.输入命令,通过重新注册语音小娜来解决问题 Get-A ...
- json::rapidjson工具
源码地址: https://github.com/Tencent/rapidjson 可跨平台使用.将 rapidjson-master\include\rapidjson 中的 rapidjson ...
- POJ 1258 Agri-Net(Prim)
题目网址:http://poj.org/problem?id=1258 题目: Agri-Net Time Limit: 1000MS Memory Limit: 10000K Total Sub ...