如何修复点击图片后深色背景遮罩可滚动的问题？

方法1：通过CSS控制body样式 #

当遮罩层（背景变暗效果）显示时，给页面的<body>元素添加以下CSS样式：

body {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

• 核心逻辑：overflow: hidden直接禁止页面滚动；position: fixed避免页面因禁止滚动突然跳回顶部；width: 100%保证body宽度不会收缩。
• 遮罩层关闭时，移除上述样式即可恢复正常滚动。

方法2：监听滚动事件并阻止默认行为 #

在遮罩层显示期间，给window绑定滚动监听事件，阻止滚动的默认行为：

// 定义阻止滚动的函数
function stopBackgroundScroll(e) {
  e.preventDefault();
}

// 显示遮罩层时启用监听
window.addEventListener('wheel', stopBackgroundScroll, { passive: false });
window.addEventListener('touchmove', stopBackgroundScroll, { passive: false });

// 关闭遮罩层时移除监听，恢复滚动
window.removeEventListener('wheel', stopBackgroundScroll);
window.removeEventListener('touchmove', stopBackgroundScroll);

• 适配场景：这种方式不会修改body布局，适合需要保持页面原有位置的场景；passive: false是关键，确保preventDefault能生效，同时兼容移动端的触摸滚动。

方法3：使用现代CSS属性（仅兼容现代浏览器） #

如果无需兼容老旧浏览器，可以利用overscroll-behavior属性：

/* 给body添加自定义类，遮罩层显示时激活 */
body.modal-active {
  overscroll-behavior: contain;
}

• 核心逻辑：overscroll-behavior: contain会限制滚动范围，阻止滚动行为溢出到背景页面，实现隔离效果。遮罩层关闭时移除modal-active类即可。

内容的提问来源于stack exchange，提问作者HTML