移动端弹出层滑动，导致底层body滑动（阻止touchmove事件冒泡？）

事件冒泡？移动端如何阻止触摸滑动事件冒泡，一个节点可滑动而不影响body节点的滑动

 

准确的说：应该是锁定背景滚动

 

 

描述：原body内容的高度已经超过了手机屏的可视区域的好几倍了，这时候点击某个按钮，出现一个弹出层，固定定位在底部，有一定的高度，超过高度内容可滚动，当滚动到底部时，或者内容并没有高过弹出层的高度，向上或向下都会给原本body里的内容产生滚动，这并不是我们想要的效果。

 

图文分析：

 

 

产生问题的原因：我觉得是因为定位导致了元素脱离标准流，而产生body的滚动，并不是事件的冒泡机制。

如果您有异议，欢迎评论留言，一起探讨

 

下面说说解决的方式：

如果觉得阻止事件冒泡能解决这个问题，那么你就 使用 e.stopPropagation() 把

正确的解决方式： 给body添加 overflow:hidden;

 

下面附一下示例代码：

简单示例代码：

    
    
    
    



    
    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        

            

            

                

                    

                        
2
                        
2
                        
2
                        
2
                        
2
                        
2
                    
                
            
        

    

高级示例代码：

源码地址

如下操作：  

至于源码目前还在更新中，自己看把