遮罩层下保留滚动，禁用其他鼠标交互

本文介绍一种通用方案：使用透明遮罩层（loading overlay）禁用页面元素的点击、右键等交互，同时允许用户通过鼠标滚轮或触摸滑动来浏览内容，且无需修改被遮罩的原始 DOM 结构。

在实现加载状态 UI 时，一个常见需求是：既要通过遮罩层阻止用户误操作，又要允许他们滚动浏览内容。传统的CSS方案，比如设置 pointer-events: none，往往顾此失彼，难以两全。

那么，有没有一种方法能同时满足这两个需求？答案是肯定的。核心思路在于跳出CSS的静态控制，转向 JavaScript 的动态事件流管理。简单来说，就是让遮罩层成为一个“智能事件过滤器”，在捕获阶段精准识别并放行滚动相关事件，同时拦截掉其他所有交互行为。

推荐实现（稳定、兼容、零内容改造）

下面是一个轻量级、无侵入的实现方案。首先，是遮罩层的 HTML 结构：

  
  

  
  

    

      Click me
      
    
  

关键在于，遮罩层初始设置了 pointer-events: auto，这为后续 JavaScript 的精细控制提供了基础。接下来，是核心的 JavaScript 事件管理逻辑：

const overlay = document.getElementById('loadingOverlay');

//  允许滚动：显式监听并透传 wheel / touchmove
overlay.addEventListener('wheel', (e) => e.stopPropagation(), { capture: true });
overlay.addEventListener('touchmove', (e) => e.stopPropagation(), { capture: true });

//  拦截所有其他交互事件（在捕获阶段）
['mousedown', 'mouseup', 'click', 'dblclick', 'contextmenu', 'keydown', 'focusin'].forEach(type => {
  overlay.addEventListener(type, (e) => {
    e.preventDefault();
    e.stopImmediatePropagation();
  }, { capture: true });
});

// ? 特别处理 touchstart/touchend：避免误触导致滚动失效
overlay.addEventListener('touchstart', (e) => {
  // 仅阻止非滚动意图的触摸（如 tap），但保留滑动手势基础能力
  if (e.touches.length === 1 && !e.target.closest('input, button, select')) {
    e.preventDefault(); // 防止触发 focus/click
  }
}, { capture: true });

这段代码清晰地划分了“通行”与“禁止”的边界。滚轮（wheel）和触摸移动（touchmove）事件被允许穿透，而点击、聚焦等交互则在源头被阻止。

注意事项与最佳实践

要实现稳定可靠的效果，有几个细节必须注意：

• 放弃对 pointer-events: none 的依赖：这个 CSS 属性无法区分滚动和其他交互，而且在 Safari 浏览器中对滚轮事件的支持存在兼容性问题，不适合作为此方案的基石。
• 务必使用 capture: true：这是整个方案生效的关键。在事件捕获阶段进行拦截，可以确保在子元素的事件处理器被触发之前就控制住事件流，避免漏网之鱼。
• 避免监听 scroll 事件：scroll 事件是一个冒泡事件，并且发生在具体的目标元素上，无法在顶层的遮罩层进行统一拦截。正确的做法是专注于控制触发滚动的 源头事件，比如 wheel、touchmove 以及键盘方向键（如果需要支持的话）。
• 移动端适配是重点：在 iOS Safari 等环境中，对 touchstart 或 touchmove 事件调用 preventDefault() 会禁用原生的滚动行为。因此，我们的策略需要更精细：touchmove 必须透传以保证滑动流畅，而 touchstart 则需要条件式地阻止默认行为，仅拦截可能引发点击或聚焦的单点触摸。
• 考虑键盘导航：如果页面需要支持通过 Tab 键切换焦点，可以从拦截列表中移除 keydown 事件，或者增加白名单逻辑，只拦截 Enter、Space 等确认键。

总结

这套方案的精妙之处在于其“非侵入性”和“通用性”。它不需要预先知道被遮罩区域的具体 DOM 结构，也无需为每个可滚动容器单独绑定事件。遮罩层扮演了一个智能网关的角色，通过精准的事件流管理，实现了“视觉上禁用、滚动上可用、交互上阻断”的三重目标。

将其封装为一个通用的 Loading 组件，你只需要将那个