fixed定位弹窗 ios手机兼容性 滚动穿透问题

遇到了一个bug，就是在一个页面上用fixed定位写的一个弹框，弹框后面是一个半透明背景，然后在ios手机出现的怪异现象是一开始点击出现弹框是正常的，但是随着页面向上拉，超出屏幕长度后，弹框的主背景白色竟然变成一种灰色不受控制了，安卓手机是正常的。
图片演示：

滚动后变成：

---

那么很明显是ios对fixed兼容性不太好，那么解决这个问题有好几种思路了：

-1.弹框出现后，改变body的overflow样式。
html,body{overflow:hidden;}
-2.弹框出现后，改变body的heigh。
body{height:屏幕实际长度;}
但是上面2个方法都有同样的缺点，体验很不友好:
滚动位置会丢失，页面会回到顶部。
那么针对我们这种页面很容易想到，去控制弹框的背景层的触摸事件上做文章：

var blackBg= ... // 背景dom对象
blackBg.ontouchmove=function (e){
       e.preventDefault()
 }

---

延伸点事件模型：
事件冒泡
结构上(非视觉上)嵌套的元素, 会存在事件冒泡的功能, 即同一个事件, 自子元素冒泡向父元素(自底向上)

e.stopPropagation();//取消向上冒泡
event.preventDefault();//阻止默认事件

事件捕获
结构上(非视觉上)嵌套关系的元素, 会存在事件捕获的功能, 即同一个事件, 自父元素捕获至子元素(事件源元素). (自顶向下，IE没有捕获事件)
如何绑定事件
ele.onxxx = function(event) { }
兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序
基本等同于写在HTML行间
obj.addEventListener(type, function( ){ }, flase);
IE9以下不兼容, 可以为一个事件绑定多个处理程序
Tips: addEventListener中的第三个参数false/true, 当为true是事件变为捕获机制 , flase时为冒泡机制
obj.attachEvent(‘on’ + type, fn);
IE独有, 一个事件同样可以绑定多个处理程序

---

最后还有一种方案是通过js来解决，在弹出层出现时,记录下页面的此时scrollTop（function getScrollTop(){
return document.body.scrollTop || document.documentElement.scrollTop;
}）,然后把body的定位属性改成fixed，同时设置 document.body.style.top = -scrollTop + ‘px’;当弹出层消失时，恢复body的定位属性，再把先前记录的scrollTop再次赋予页面（
document.body.scrollTop = document.documentElement.scrollTop = scrollTop）。