解决H5弹窗滚动穿透问题

解决H5弹窗滚动穿透问题

问题场景：

​ 在H5移动端的弹窗中滚动时，底部页面会跟着滚动，又或者弹窗本身内容也是可以滚动的，当弹窗内容滚动到底部/顶部时仍然继续滚动，就会导致底部页面跟着滚动。

解决思路：

​ 想要解决这个问题，实际上通过设置页面的overflow就可以解决，但是这样会出现一个问题，即在PC端时，页面会由于overflow的设置而导致页面滚动条不断出现/隐藏，从而造成页面跳动，降低用户体验，而经过实测，我发现在移动端并没有滚动条导致页面跳动这一说，而我们这个问题刚好只会在移动端出现，PC端并不会出现这个问题，那么我们就很好解决这个问题了：即PC端不会出现此问题，我们直接通过判断当前环境处于PC还是H5，然后对症下药就行了，反正移动端使用overflow又不影响体验。

解决步骤：

1. 引入以下工具函数：

   /**
    * 是否是PC端
    */
   export function ISPC(){
     var isWindowsPhone = /(?:Windows Phone)/.test(u),
       isSymbian = /(?:SymbianOS)/.test(u) || isWindowsPhone,
       isAndroid = /(?:Android)/.test(u),
       isFireFox = /(?:Firefox)/.test(u),
       isChrome = /(?:Chrome|CriOS)/.test(u),
       isTablet = /(?:iPad|PlayBook)/.test(u) || (isAndroid && !/(?:Mobile)/.test(u)) || (isFireFox && /(?:Tablet)/.test(u)),
       isPhone = /(?:iPhone)/.test(u) && !isTablet,
       isPc = !isPhone && !isAndroid && !isSymbian;
       return isPc
   }
   

2. 定义控制页面是否可滚动的函数：

   function setPageScroll(isShow){
       if(!ISPC()){
           let rootElement = document.body || document.documentElement
           if(isShow){
               rootElement.style.overflow = 'hidden'
           }else{
               rootElement.style.overflow = 'auto'
           }
       }
   }
   

3. 在弹窗显示/隐藏时调用上面这个setPageScroll函数：

   setPageScroll(true) // 弹窗显示时调用
   setPageScroll(false) // 弹窗隐藏时调用
   

通过以上步骤，我们就可以解决H5移动端弹窗滚动穿透问题了，当我们的弹窗显示时，底部页面绝对不会再跟着滚动了。

补充：

​ 如果你的弹窗内容不需要滚动的话，你可以选择使用event.preventDefault()来阻止弹窗的滚动事件，这样也可以解决这个问题，并且是最简单的方式。