H5弹窗弹出后，页面可滚动，希望禁止滚动

移动端开发：解决弹窗滚动导致背景页面跟随滚动的问题

最新推荐文章于 2024-10-21 14:37:24 发布

原创最新推荐文章于 2024-10-21 14:37:24 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

本文介绍了在移动端开发中遇到的弹窗滚动导致背景页面滚动的常见问题，并提供了三种解决方案。方法1是设置html的overflow为hidden，但可能导致页面回滚；方法2是阻止touchmove事件，但这会使滚动事件失效；方法3是通过改变body样式实现，实测可行，可以阻止背景滚动而不影响弹窗。

1.场景：当我们进行移动端开发时候，页面肯定大概率不是一屏展示，这时候就会有滚动效果，这时当我们点击某个按钮出现弹窗后，你会发现你在弹窗上上下滚动时，会导致蒙层下页面跟着滚动，虽然功能上没啥问题但是感官不好。

2.解决

方法1:

1.给html标签添加overflow:hidden属性（缺点：先滚动页面，后弹出弹窗，页面会回到顶部）

let body=document.getElementsByTagName('html');
if(modelIsShow){
  body.style.overflow='hidden';
}else{
  body.style.overflow='';
}

2.禁止touchmove的默认事件（弊端：滚动事件失效）

document.addEventListener('touchmove',function(e){
  if(modelIsShow){
    e.preventDefault();
  }
},{passive: false})

3.改变body样式（实测可行）

/**
 * 阻止背景滚动
 *
 * @param  Boolean  flag    [是否阻止背景滚动]
 */
const preventBack = (flag) => {
    if (flag) {
        const top = document.documentElement.scrollTop || document.body.scrollTop;
        document.body.style.cssText += `
            position: fixed;
            width: 100vw;
            left: 0;
            top: ${-top}px;
        `;
    } else {
        const top = document.body.style.top;
        document.body.style.cssText += `
            position: static;
        `;
        window.scrollTo(0, Math.abs(parseFloat(top)));
    }
};