React移动端H5页面出现弹窗蒙层屏幕不可滑动

最近在做一个需求，用户第一次进入网页会有一个新手引导的功能，是一个半透明的蒙层，蒙层之后的主页面会有很多的模块功能，在功能很多的情况下，屏幕就可以向下滑动，UI觉得在有蒙层的情况下最好不要让屏幕可以滑动，因为新手引导这个图片是根据一个模块来定位的，如果滑动的话，新手引导也会跟着滑动，肯定是不合理的。

首先在加载新手引导的位置，加载完之后，执行监听事件，注意监听的元素一定要是不可滑动的元素，就是蒙层。（一开始我把事件监听在body元素上了，导致都不能滑动了，太笨了。）

    // 获取请假新手引导
    getLeaveNewHandGuid() {
        const {apply_switch} = this.props.home.data;

        //唯一的同一个事件函数
        const handler = function (event) {
            event.preventDefault();
        }

        // 申请开关打开
        if(apply_switch){

            //加载新手引导的代码
            xxxxx
            xxxx

            //添加监听事件--页面不可滚动
            document.querySelector('.mask').addEventListener('touchmove',handler,{passive: false });
        }
    }

我的新手引导引用的是一个组件，所以在新手引导的组件中点击结束引导的函数中，结束监听，注意一定要是self.handler，代表是同一个事件函数，不可两个函数都写一个事件函数，如果是在同一个组件中，就可以直接使用handler。

   // 结束新手引导
    onOverGuid() {

        axios.post('ajax-xxx', {
            data:data
        }).then(res => {
               //隐藏新手引导弹窗
            document.querySelector('.new_hand_guid-container').style.display = 'none';
        })  

        //在结束时移除禁止滑动事件      
        document.querySelector('.mask').removeEventListener('touchmove',self.handler,{passive: false});
    }

在react中不使用passive参数会报错，它可以让浏览器同时执行，是网页更加流畅，至于passive参数的用法，可以看这篇文章 ：  passive的用法   ，addEventListener