移动端弹出层滚动时禁止body滚动

相信很多写移动端的朋友会遇到这个问题，我也遇到了，之后就辛辛苦苦的在网上找解决办法，下面我大概提一下我在网上看到的几种办法，行不行的通呢？本人就亲测了下。本人学的还不是太深，如果有什么不对的地方或者有好的解决办法，也请告知。

1.弹出层出现时给body添加一个css样式：height:100%;overflow:hidden;弹出层消失再去掉这个类。

测试结果：chrome手机模拟器还真可以，but到了我的安卓手机上，扑街了···

之后又看到有人提到，是要html也设置同样的样式才会有效果，所以同样给html添加了这个类，弹出层消失时去掉这个类。

测试结果：效果是有了，弹出层内可以滚动，底层不滚动了，but当弹出层出现，底层body会回到页面顶部，这个并不是我想要的。所以此方法XX。

2.弹出层出现时给body添加样式position:fixed，并算出当时页面的scrollTop滚动值，给body一个负的top值来保证body不会回到顶部，弹出层消失时恢复。

以下代码基于jquery.var top = 0;//给top变量一个初始值，以便下方赋值并引用。$('.tan').click(function(){//点击事件弹出层显示，$('.div2').show(); //弹出层出现     top = $(window).scrollTop();//获取页面的scrollTop；$('body').css("top",-top+"px");//给body一个负的top值；$('body').addClass('add');//给body增加一个类，position:fixed; });$('.close').click(function(){//弹出层消失点击事件$('.div2').hide(); //弹出层消失$('body').removeClass('add');//去掉给body的类$(window).scrollTop(top);//设置页面滚动的高度，如果不设置，关闭弹出层时页面会回到顶部。});

测试效果：安卓手机效果实现了，哈哈哈····，再测个苹果手机，嗯···？为什么苹果手机的效果这么挫，弹窗层内部滑动不是很顺畅，手滑多少页面滑多少，有点死板，不知为何？

3.无意中发现定位层之间好像是不会传递事件的，将弹窗之外的元素包在一个div里，给这个div设置定位样式，给宽高是充满屏幕的，设置overflow:auto;这样这个div和弹出层就是两个定位层，滑动弹出层时不会传递到div上的。

   第一种：div{position:absolute;top:0;bottom:0;left:0;overflow:auto;}第二种：div{height:100%;//前提设置他的父元素都是100%的高才可以充满屏幕高度；position:absolute;top:0;left:0;overflow:auto;}

给div设置以上两种其中一种样式就可以，第一种的bottom：0和第二种height:100%都是为了固定div的高度是屏幕的高度，overflow:auto使滚动发生在div内部，这样弹出层的滚动就不会传递给div了,如果不给设置高度，弹出层的滚动事件仍然会传递给body，div就会随着body滚动。

    测试结果：和第二个方法结果差不多，效果是有了，但是在ipone手机上定位层上下滑动效果不佳。

这个方法是我无意中发现，本以为有简便方法可以解决，但是在苹果手机上就是不给力···

4.最后的方法还是用到插件了，iScroll.js，这个js有自己的滑动方式，实现原理是阻止元素默认滑动事件，用这个插件自己的滑动方式实现滑动。

以下是我测试页面的全部代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>test</title>
<style>
#wrapper{width:100%;/*height:100%;*/margin:0 auto;overflow:hidden;}
#wrapper input{width: 100px;height: 50px;background: #CC3333;
}
#wrapper ul li{width:100%;height:40px;line-height:40px;text-align:center;background:#09C;font-size:22px;color:#ffffff;margin:10px 0px;}
#wrapper ul li.hong{background:#C33;}
.main{width:100%;height:100%;/*background:rgba(0,0,0,0.78);*/position:fixed;left:0px;top:0px;display:none;}
#tan{width:60%;height:400px;margin:0 auto;overflow:hidden;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
#tan ul li{width:100%;height:40px;line-height:40px;text-align:center;background:#09C;font-size:22px;color:#ffffff;margin:10px 0px;}
.bg{width:100%;height:100%;background-color: rgba(0,0,0,0.5);position:absolute;top:0;left:0;
}
</style>
</head>
<body><div id="wrapper"><div>遇见，是琥珀流年中如云朵般美丽的诗篇，没有格律，没有韵脚，读之，却朗朗上口，百读不厌。人生中最难忘的，就是一次次镌刻在心灵深处的相遇。静默独处时，伤心落泪时，细细品味，点点滴滴的美好，足可以润泽晦暗枯燥的心灵。佛曰：前生五百次的回眸才换得今生的一次擦肩而过。那么，我们的相遇、相知是前生多少次回眸才修得的缘分呢？前生太虚渺，不可知；来生有太渺远，不可测；能把握的，唯有今生。所以，珍惜今生所有的遇见。一花一天堂，一草一世界，一树一菩提，一土一如来，一方一净土，一笑一尘缘。想来，所有的遇见，都是前世今生该有的缘分。“同是天涯沦落人，相逢何必曾相识”是萍水相逢却又惺惺相惜的缘分， “桃花潭水深千尺，不及汪伦送我情”是高山流水、情同手足的缘分,“曾经沧海难为水，除却巫山不是云”是相识相知、执手红尘的缘分。席慕蓉曾说：如何让你遇见我，在我最美丽的时刻，为这，我已在佛前求了五百年，求他让我们结一段尘缘。所以，不管如何，我珍惜所有的遇见。无论我们是素昧平生，还是相识相知。<input type="button" value="点我试一下"/>我珍惜素昧平生的朋友。虽然我们未曾谋面，可是，一声轻轻的问候，一个甜甜的笑脸，几行温馨的留言，瞬间便拂去萦绕心头的缕缕疲惫和丝丝尘埃。不为别的，只为那一份远隔千里的信任，只为那不为繁琐忙碌阻隔的真诚。虽不相见，我亦懂得，你同我一样，于茫茫人海中穿梭忙碌，于深杳红尘中为了家人奔波付出。我很珍惜，这一份静默在生命一隅的如水清澈的缘。我珍惜生活中风雨同舟的朋友。千金易得，知己难求。朋友的真情，是人生千金难买的珍宝。也许，他（她）不会锦上添花，但是他（她）会雪中送炭。他（她）不会甜言蜜语，但是他（她）会推心置腹。伤心时，一句温馨的问候；孤独时，一次真心的陪伴；困难时，一份无私地援助：这些，都是穿透红尘冷漠的暖。所以，我很珍惜，这一份闪烁在我生命中的如阳光温暖的缘。我珍惜和我牵手红尘的爱人。不管他前生是不是在三生石畔刻下爱情的誓言，也不管他是不是前生将我掩埋的那个人，我只知道，他是我的亲人。我们除了要平平淡淡的共度光阴，还要共同撑起家庭的未来，无论多少的风风雨雨，我们要一起面对，一起承担。我珍惜，这一份镶嵌在我生命中的如玉温润的缘。如果，今生还有一种特殊的遇见：彼此相爱过，却无缘牵手。那么，就把这份爱安放在心灵一隅，于夜深人静时，于静默独处时，在内心深处幽幽绽放吧。纵使不能在一起，相爱过，也是人生旅途最美的一段珍藏。如果，不能继续做朋友，默默地祝福对方也好。如果不能祝福对方，各安天涯一方也好。总之，不要反目为仇，不要辜负了曾经的美好，和今生相遇的缘分。不懂得珍惜的人，辜负了红尘中遇见的情谊，就会成为情感上的孤家寡人，就会离快乐越来越远。遇见，是一缕清风，舒爽怡人；遇见，是一束阳光，温暖明媚；遇见，是一阕诗词，隽永灵动；遇见，是一曲清音，余音绕梁。今生相遇的人，来生不一定相见。请珍惜，今生所有的遇见！</div></div><div class="main"><div id="tan"><ul>  <li>1</li>  <li>2</li><li>3</li>  <li>4</li> <li>5</li>  <li>6</li> <li>7</li>  <li>8</li> <li>9</li>  <li>10</li> <li>1</li>  <li>2</li> <li>1</li>  <li>2</li> <li>1</li>  <li>2</li> <li>1</li>  <li>2</li> <li>1</li>  <li>2</li> <li>1</li>  <li>2</li>   </ul></div></div>
</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/iscroll.js"></script>
</html>
<script>$(function(){$("#wrapper").find("input").click(function(){$(".main").show();//弹出层显示$('.bg').on('touchmove', function (e) { e.preventDefault(); }, false);//弹出层的背景层阻止默认滑动事件new IScroll('#tan');//});$(".main").click(function(){$(".main").hide();});});
</script>

原理是：弹出层分两层，一个是滑动层tan,一个是背景层bg,给背景层阻止默认滑动事件，这样滑动它的时候不会影响底层，滑动层tan用了插件的滑动方式，也不会传递底层，这样就解决的滑动层滑动而body不滚动。

此方法是没有阻止body的滚动，而是阻止了传递滑动事件的发生。

  测试结果：完美！

找到了这个方法之后我一直对第二种和第三种出现的问题不死心，代码不是太多，又不用引用插件，多方便啊，在ipone手机上为什么会滑动卡顿呢？所以我继续研究，终·······于········知道了解决办法，(^o^)/

有一个这样的样式属性不知道大家是否知晓：

 -webkit-overflow-scrolling : touch;  //可以让页面在Native端滚动时模拟原生的弹性滚动效果

在需要滚动的元素上加上这个，第二、三种出现的问题就解决了，够我高兴好久了。

因为对于这个了解的不多，就查了一下是否会带来什么不良影响，以下是网上看到的有人遇到的问题并如何解决的：
1.http://www.tuicool.com/articles/U73Erq/
2.http://seabye.com/blog/11893.html
3.http://www.111cn.net/cssdiv/css/108397.htm

总结下来，使用这个需要注意的问题有以下几个方面
1.会影响层级，需处理好层级关系
2.不要将此属性加在body上，否则会有部分浏览器白屏，需加在滚动元素上
3.设置scrollTop值时需注意此属性的影响
4.创建了带有硬件加速的系统级控件，所以效率很高。但是相对耗更多内存，最好在产生了非常大面积的overflow时才应用。

因为也是从网上找的，所以并不完全保证其准确性，大家如果有用到的根据自己的实际情况采取相应的措施吧。

OK，回到这篇博文的主题，亲测了几种方法之后后三种都是可以实现效果的，所以结果还是不错的，至于使用哪种更好，谁需要用自己去考虑吧······ (^o^)/