完美解决移动端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: ...
随机推荐
- Python 对cookies的处理——urllib2
import urllib2 import cookielib cookie = cookielib.CookieJar() opener = urllib2.build_opener(urllib2 ...
- php7和php5区别是什么
PHP7距正式发布以及有挺长时间了,刚出道就号称比旧版本快了几倍,各种开源框架或系统运行在PHP7上速度效率提高了几倍.那么php7和php5之间的区别是什么?下面本篇文章就来给大家简单介绍一下,希望 ...
- spark针对web日志正则匹配
针对于web日志做分析是学习spark常用练习项目.此文介绍web日志正则匹配相关小提示. 实例测试 从网上找了一个access日志案列 218.19.140.242 - - [10/Dec/201 ...
- 手把手教你如何在window下将jenkins+allure集成生成的测试报告通过jenkins配置邮箱自动发送-04（非常详细，非常实用）
简介 上一篇生成测试报告,小伙伴们和童鞋们就又问道,测试报告已经生成了,怎么发送给相关的负责人了?小伙伴们和童鞋们不要着急,听宏哥慢慢给你道来,心急吃不了热豆腐哈.今天这篇文章宏哥就给小伙伴和童鞋们来 ...
- django的url分发封装
h2, body>h3, body>h4, body>h1{ padding: 10px; background-color: #4cae4c; text-align: center ...
- KafkaStream-高级别API
使用Streams DSL构建一个处理器拓扑,开发者可以使用KStreamBuilder类,它是TopologyBuilder的扩展.在Kafka源码的streams/examples包中有一个简单的 ...
- Android9.0 MTK 平板横屏方案修改(强制app横屏 + 开机logo/动画+关机充电横屏 + RecoveryUI 横屏)
文章较长建议先收藏再看 拆解步骤 1.app 强制横屏显示,无视 android:screenOrientation="portrait" 属性 2.屏幕触摸坐标修改为横屏 3.开 ...
- DG常用运维命令及常见问题解决
DG常见运维命令及常见问题解决方法 l> DG库启动.关闭标准操作Dataguard关闭1).先取消日志应用alter database recover managed standby data ...
- sql 外键 on update cascade 和 on delete cascade 作用区别？
这是数据库外键定义的一个可选项,用来设置当主键表中的被参考列的数据发生变化时,外键表中响应字段的变换规则的.update 则是主键表中被参考字段的值更新,delete是指在主键表中删除一条记录:on ...
- 微信小程序发起请求
一.示例代码 wx.request({ url: 'test.php', // 仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-ty ...