移动端页面滑动事件穿透问题及其解决方案

滑动事件穿透：

在一个可滚动的列表页中打开弹窗，底部的页面理论上是不可滚动的，但是当滑动弹窗时，底部页面会跟随滚动，这就是所谓的页面滚动穿透的问题。

解决方案一：

当弹窗显示时，在父元素上添加fix类来禁用滚动；当弹窗隐藏时，移除fix类。

        .fix{height: 100%;overflow: hidden;}

缺点：

当弹出蒙层时，禁用了html和body的滚动条，滚动列表的滚动位置会丢失，会重置到没有滚动的状态，需要js进行还原。

  $(function () {var scrollTop;$('.show').click(function () {scrollTop = document.documentElement.scrollTop;// 记录scrollTop的值console.log(scrollTop);$('.model').show();$('.content').addClass('fix');});$('.hide').click(function () {$('.model').hide();$('.content').removeClass('fix');document.documentElement.scrollTop = scrollTop;// 设置scrollTop的值})})

demo完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>滚动穿透</title><meta content="width=device-width,initial-scale=1.0,user-scalable=no"><script src="jquery.js" type="text/javascript"></script><style>html,body{width: 100%;height:100%;}*{padding: 0;margin: 0;}.content{height: 3000px;background: #eea236;}.model{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;height: 400px;width: 100%;background: #00b3ee;overflow: scroll;display: none;}.btn{position:fixed;top:0;left:0;height: 100px;width:200px;font-size: 40px;background: #000000;color: #fff;}.hide{left: 210px;}.fix{height: 100%;overflow: hidden;}</style>
</head>
<body>
<div class="content" style="font-size: 30px;"><button class="btn show">显示</button><button class="btn hide">隐藏</button><div class="model">长城（Great Wall），又称万里长城，是中国古代的军事防御工程，是一道高大、坚固而连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。长城修筑的历史可上溯到西周时期，发生在首都镐京（今陕西西安）的著名的典故“烽火戏诸侯”就源于此。春秋战国时期列国争霸，互相防守，长城修筑进入第一个高潮，但此时修筑的长度都比较短。秦灭六国统一天下后，秦始皇连接和修缮战国长城，始有万里长城之称[1]  。明朝是最后一个大修长城的朝代，今天人们所看到的长城多是此时修筑。[2]长城资源主要分布在河北、北京、天津、山西、陕西、甘肃、内蒙古、黑龙江、吉林、辽宁、山东、河南、青海、宁夏、新疆等15个省区市。期中陕西省是中国长城资源最为丰富的省份，境内长城长度达1838千米[3-10]  。根据文物和测绘部门的全国性长城资源调查结果，明长城总长度为8851.8千米，秦汉及早期长城超过1万千米，总长超过2.1万千米。[11]1961年3月4日，长城被国务院公布为第一批全国重点文物保护单位[12]  。1987年12月，长城被列入世界文化遗产。[13]</div>
</div>
</body>
<script>$(function () {var scrollTop;$('.show').click(function () {scrollTop = document.documentElement.scrollTop;// 记录scrollTop的值console.log(scrollTop);$('.model').show();$('.content').addClass('fix');});$('.hide').click(function () {$('.model').hide();$('.content').removeClass('fix');document.documentElement.scrollTop = scrollTop;// 设置scrollTop的值})})
</script>
</html>

解决方案二：阻止touchmove默认事件
通过阻止弹窗的touchmove默认事件禁用滚动实现
源码（基于方案一中demo的dom结构）:

$(function () {
var modal = document.getElementsByClassName('modal')[0]; // 弹窗dom对象
modal.addEventListener('touchmove', function(e) {
e.preventDefault();
}, false);
})

缺点：

弹窗中里不能有其它需要滚动的内容，如大段文字需要固定高度，显示滚动条也会被阻止。

解决方案三：设置 html,body{overflow:hidden;}

在PC和移动端都能禁止掉下层的滚动。

缺点：

网页超出窗口部分不可滑动

总结：使用方案一。

移动端页面滑动事件穿透问题及其解决方案相关推荐

移动端上下拖动调整顺序效果_移动端上下滑动事件之--坑爹的touch.js
移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说 ...
移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
移动端 touch 滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案
前言之前有个项目是运行在移动端Web,和微信H5中,由于默认的弹窗UI不太好看,而且还不统一,所以页面需要自定义弹窗,添加icon.提示信息.操作按扭等样式. 问题描述: 如果在页面内容的高度超过了 ...
关于移动端页面滑动报错 [InterUnableUnable to preventDefault inside passive或 fastclick.js:446 [InterUn :
报错: fastclick.js:446 [InterUnable to preventDefault inside passivevention] event listener due to tar ...
《H5 App开发》移动端IOS click 事件响应缓慢的解决方案
造成点击缓慢的原因从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 第一 ...
移动端页面常见bug
1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题.解决方案是 ...
移动端——页面点击（ touchend - click）
手机端页面好多要注意的,点击事件就是其中一个: 在手机端页面中使用 click,安卓手机能正常实现点击效果,可是苹果手机不能点击:用 touchend 代替 click,苹果手机中能点击,但是可能出现 ...
android页面设置背景图片大小,android页面设置background为图片后，页面滑动掉帧问题...
最近接手的一个android项目里面,有个viewpager+3个fragment的页面,就是很常见的可以左右滑动切换页面的那种布局.接手的时候告诉我,这个页面有卡顿现象,性能需要优化.一开始觉得是f ...

移动端页面滑动事件穿透问题及其解决方案

解决方案二：阻止touchmove默认事件
通过阻止弹窗的touchmove默认事件禁用滚动实现
源码（基于方案一中demo的dom结构）:

缺点：

移动端页面滑动事件穿透问题及其解决方案相关推荐

最新文章

热门文章

移动端页面滑动事件穿透问题及其解决方案

解决方案二：阻止touchmove默认事件 通过阻止弹窗的touchmove默认事件禁用滚动实现 源码（基于方案一中demo的dom结构）:

缺点：

移动端页面滑动事件穿透问题及其解决方案相关推荐

最新文章

热门文章

解决方案二：阻止touchmove默认事件
通过阻止弹窗的touchmove默认事件禁用滚动实现
源码（基于方案一中demo的dom结构）: