解决使用插件带来的页面弹框滚动穿透问题

问题：

在react项目中使用ant  Design  Mobile 的datePicker时间插件时出现了在遮罩层上滚动时下面的页面也出现了滚动的情况，用户体验不太好。在浏览器中打开是没问题的，放在手机上就不行了。

解决办法：

1、在root的样式里加上

#root{

overflow-y: auto;

-webkit-overflow-scrolling: touch;

}

2、在包裹时间插件的外层div上加上一个点击事件  代码如下：

handleClick(){
        const overflow = document.getElementById('root').style.overflow;     
        if( overflow == 'hidden'|| overflow == 'auto'){
                document.getElementById('root').style.overflowY ='auto' ;
                document.getElementById('root').style.position ='' ;
             }else{
                document.getElementById('root').style.overflow ='hidden' ;
                document.getElementById('root').style.position ='fixed' ;   
             }
    }

 

 

亲测有效，谁有更好的办法可以再分享。