ios手机弹窗滚动卡死现象解决方法
出现滚动卡死的主要现象有:
1、点击其他区域,再在滚动区域滑动,滚动条无法滚动的bug
2、滚动后滚动到底部或者顶部再滚动出现卡死
解决方法:
1、如果弹窗底部页面有滚动,弹出弹窗的时需要加上以下代码,禁止底部页面滚动
document.body.style.cssText = 'overflow: hidden'
2、弹窗的遮罩层跟内容需要分开写,不能把内容放到遮罩里,并把遮罩里的touchmove.prevent="" @touchstart.prevent="" @touchend.prevent="", (以下举例是按vue举例的,可以自行设置)阻止浏览器的默认行为。(如果把滚动的内容放到遮罩里,因为阻止了浏览器的默认行为,会滚动不了)
<!-- 遮罩 -->
<div class="mask" @touchmove.prevent="" @touchstart.prevent="" @touchend.prevent=""></div>
<!-- 内容区域 -->
<div class="content"></div>
3、弹窗关闭需要加上以下代码,恢复底部页面的滚动
document.body.style.cssText = 'overflow: auto'
这样ios弹窗滚动卡死现象完美解决!!!