滑动事件穿透：
在一个可滚动的列表页中打开弹窗，底部的页面理论上是不可滚动的，但是当滑动弹窗时，底部页面会跟随滚动，这就是所谓的页面滚动穿透的问题。
解决方案一：
当弹窗显示时，在父元素上添加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和移动端都能禁止掉下层的滚动。
缺点：
网页超出窗口部分不可滑动
总结：使用方案一。
