弹出层，阻止页面滚动--阻止事件冒泡

今天要实现一个效果：点击图片后弹出一个浮层，该浮层内容比较多，设置overflow:auto;希望浮层滚动的时候，底层的页面是不动的。在网上查了很多，都没有找到解决方案，有人在问，但是并没有人回答。所以特地跑去问了师傅，在这里分享一下，希望遇到同样问题的小白，可以有所帮助。

首先，把底层页面放在一个div中，包起来，设置它的css样式：

#main{
position: fixed;
width: 100%;
top:0;
height:100%;
z-index:1;
overflow: auto;
}

（其中，z-index的值根据自身情况设定。）

然后，把要弹出的浮层也放在一个div中，并为其设置css样式：

#Tan{
position: fixed;
width: 100%;
top:0;
display:none;
height:100%;
z-index: 2999;
overflow: auto;
}

（同样，z-index值根据自身情况设定）

最后，就是js代码部分：

document.getElementById(floatLayer).addEventListener('DOMMouseScroll',function(event){

event.stopPropagation();

},false);

给弹出层添加一个滚轮事件 DOMMouseScroll

剩下的就是用javascript设置页面的display，实现页面的出现和消息。