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

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

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

1 #main{
2     position: fixed;
3     width: 100%;
4     top:0;
5     height:100%;
6     z-index:1;
7     overflow: auto;
8 }

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

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

1 #Tan{
2     position: fixed;
3     width: 100%;
4     top:0;
5     display:none;
6     height:100%;
7     z-index: 2999;
8     overflow: auto;
9 }

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

最后，就是js代码部分：

1 document.getElementById(floatLayer).addEventListener(‘DOMMouseScroll‘,function(event){
2
3     event.stopPropagation();
4
5 },false);

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

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