解决遮罩穿透滚动的问题

最新推荐文章于 2024-06-21 16:57:04 发布

羡与

最新推荐文章于 2024-06-21 16:57:04 发布

阅读量909

点赞数

分类专栏： html javascript 前端文章标签： javascript html 前端

本文链接：https://blog.csdn.net/hfhwfw161226/article/details/89097838

版权

前端同时被 3 个专栏收录

30 篇文章 1 订阅

订阅专栏

javascript

13 篇文章 0 订阅

订阅专栏

html

7 篇文章 1 订阅

订阅专栏

针对很多弹出层的遮罩显示后仍然可以滚动底层页面的问题

方法一：

显示弹框时设置页面高度为100%，且溢出隐藏，关闭弹框时放开原先的设置

// 打开弹框时
let body = document.querySelector('body');
body.style.overflow = 'hidden';


// 关闭弹框时
let body = document.querySelector('body');
body.style.overflow = 'auto';

方法二：

手机端部分机型以上方法不奏效（ios12.0）,可创建touchmove监听器来禁止页面滚动事件

function preventDefault(event){
   event.preventDefault();
},


// 弹框打开时
document.body.addEventListener('touchmove', preventDefault, { passive: false });


// 弹框关闭时
document.body.removeEventListener('touchmove', preventDefault, { passive: false });