移动端防止弹窗下级页面滑动的方法介绍

时间：2023-03-17 17:43:00 科技观察

在做H5开发的时候，很多场景都需要弹窗。当出现弹窗时，在大多数场景下，弹窗的下页不能滑动是意料之中的。当然，我不希望弹窗滑动。最近，肝页又遇到了这个问题。下面介绍最常用的方法，以及一些边界条件和应对策略。overflow:hidden流传最广的方式是将overflow:hidden设置到body上，防止页面滑动。document.body.style.overflow='hidden'document.body.style.overflow='visible'large在某些情况下，这可能有效，但在某些机器上，这无效：弹出窗口掩码还有一个情况如下，页面部分元素有部分滑动

目前的情况，给body设置overflow:hidden还是没有效果。此时，在弹窗中添加上层掩码如下。一般情况下，下层元素是不会接收到touchmove事件的。

其中inset属性是left,top,right,bottom的缩写但是在某些机型中，下面的元素仍然会收到touchmove事件，所以会随之滑动，所以需要下面的方法：防止touchmove来防止触摸滑动事件。touchmove的默认行为是consttouchHandle=function(e){e.preventDefault()}//弹出窗口事件{onShow(){document.body.addEventListener('touchmove',preventDefault,{passive:false,});},onHide(){document.body.removeEventListener('touchmove',preventDefault);}}在弹窗打开时直接阻止目标元素滑动事件的默认行为是，如果弹窗的内容是不可滑动的，那么这种方法是最省事和高效的。如果弹窗有可滑动的内容，而且滑动的内容比较复杂，那就用touchmove控制细粒度的力来防止滑动事件很麻烦position:fixed另外一个常用的position:fixed是弹出窗口打开时固定目标元素，关闭时恢复目标元素。由于定位会改变元素在页面中的位置，所以需要记录元素在固定位置取消后，元素滚动到原来的位置//弹窗的事件{onShow(){document.body.style.top=`${document.body.getClientRects()[0].top}px`;document.body.style.position='固定';document.body.style.left='0';document.body.style.right='0';},onHide(){document.body.style.position='visible';window.scrollTo(0,Math.abs(+document.body.style.top.replace('px','')));}}使用class而不是style这也是偶然发现的，在iOS低端机上尝试了以上所有方法后还是发现了问题。现象如下（TODO：补充图片）。下页不会滑动，但是遮罩和弹窗可以整体下拉。弹窗为下拉列表弹窗。出现的位置需要动态计算，如下结构最后发现style和class设置的样式在这个模型上是一致的，但是实际交互表现不一致的修复后的html结构如下，在元素中插入一个style标签，使用class选择器和!important重载这段距离的style代码如下{onShow(){setTimeout(()=>{constdialogEl=document.querySelector('.dialog')if(!dialogEl){return}conststyle=document.createElement('style')style.textContent=`.dialog{顶部：${dialogEl.style.top}!important;}`dialogEl.append(style)},200)}}很迷惑的操作，但是解决了滑动异常的场景本文介绍了4种常见的解决方法，以及1个“神秘操作”demodemo截图

上一篇：不懂就问：SQL语句中Where条件后面写1=1是什么意思？_0

下一篇：没钱了！32%的CISO考虑离职

移动端防止弹窗下级页面滑动的方法介绍相关文章