美文网首页
移动端react弹出浮层如何阻止下面body滚动

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

作者: 蔷薇心情 | 来源:发表于2019-05-16 19:55 被阅读0次

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

    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';
    

    相关文章

      网友评论

          本文标题:移动端react弹出浮层如何阻止下面body滚动

          本文链接:https://www.haomeiwen.com/subject/ewywaqtx.html