解决H5弹窗滚动穿透问题
问题场景:
在H5移动端的弹窗中滚动时,底部页面会跟着滚动,又或者弹窗本身内容也是可以滚动的,当弹窗内容滚动到底部/顶部时仍然继续滚动,就会导致底部页面跟着滚动。
解决思路:
想要解决这个问题,实际上通过设置页面的overflow
就可以解决,但是这样会出现一个问题,即在PC端时,页面会由于overflow
的设置而导致页面滚动条不断出现/隐藏,从而造成页面跳动,降低用户体验,而经过实测,我发现在移动端并没有滚动条导致页面跳动这一说,而我们这个问题刚好只会在移动端出现,PC端并不会出现这个问题,那么我们就很好解决这个问题了:即PC端不会出现此问题,我们直接通过判断当前环境处于PC还是H5,然后对症下药就行了,反正移动端使用overflow
又不影响体验。
解决步骤:
-
引入以下工具函数:
/** * 是否是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 }
-
定义控制页面是否可滚动的函数:
function setPageScroll(isShow){ if(!ISPC()){ let rootElement = document.body || document.documentElement if(isShow){ rootElement.style.overflow = 'hidden' }else{ rootElement.style.overflow = 'auto' } } }
-
在弹窗显示/隐藏时调用上面这个
setPageScroll
函数:setPageScroll(true) // 弹窗显示时调用 setPageScroll(false) // 弹窗隐藏时调用
通过以上步骤,我们就可以解决H5移动端弹窗滚动穿透问题了,当我们的弹窗显示时,底部页面绝对不会再跟着滚动了。
补充:
如果你的弹窗内容不需要滚动的话,你可以选择使用event.preventDefault()
来阻止弹窗的滚动事件,这样也可以解决这个问题,并且是最简单的方式。