移动端react弹出浮层如何阻止下面body滚动

首先,在触发弹出浮层事件后添加下面代码:

stopScroll(){
    e.stopPropagation();
    e.preventDefault();
},
showPop(){
    document.body.addEventListener("touchmove", self.stopScroll, {passive: false });
    document.body.style.overflow = 'hidden';
}
  • passive参数:
    是否让 阻止默认行为(preventDefault()) 失效

当触发关闭浮层事件后,需要添加如下代码恢复body滚动:

document.body.removeEventListener('touchmove',self.stopScroll);
//添加事件监听时添加了passive参数,在ios9中移除事件监听也需要加此参数
document.body.removeEventListener('touchmove',self.stopScroll,{passive: true});
document.body.style.overflow = 'auto';
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容