遮罩层仅允许滚动 禁止鼠标触摸交互

通过动态控制 pointer-events 属性并结合原生事件拦截机制，可以在不修改底层内容的前提下，实现仅允许滚动、禁用点击、拖拽等所有其他交互的加载遮罩效果。

在开发通用加载遮罩组件时，常遇到一个看似矛盾的需求：视觉上需要锁定页面内容，禁止用户点击、输入或拖拽，但同时必须保留页面或容器的滚动能力。无论是鼠标滚轮还是触屏滑动，都不应被阻挡。

这个需求的难点在于，CSS 的 pointer-events 属性是一种“一刀切”的方案。设置为 none 时，所有指针事件（包括滚轮）都会穿透，按钮无法被拦截；设置为 auto 时，遮罩层会捕获所有事件，滚动功能随之失效。仅靠 CSS 无法两全。

那么，是否存在一种方法能兼顾两者？答案是肯定的。理想的解决方案需要满足几个条件：零侵入性（不修改被遮盖内容的 DOM 结构或事件逻辑）、跨设备兼容（同时处理鼠标和触摸事件）以及语义清晰（确保滚动行为原生流畅）。

核心思路十分巧妙：利用 JavaScript 智能区分用户意图。对于非滚动交互（如点击、触摸开始），拦截并阻止；对于滚动行为，则让其畅通无阻。实现的关键在于动态操控遮罩层的 pointer-events 属性。

推荐实现方案（轻量、无依赖、通用）

首先介绍 HTML 结构。需要一个覆盖在内容上方的遮罩层，其初始状态必须设置为 pointer-events: none，这是保证滚动事件能够穿透的基础。

  
  

  
  

    

      Click Me
      
    
  

接下来是 JavaScript 部分。逻辑在于事件监听与状态切换的技巧：

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

// 1. 阻止鼠标左键/右键/中键点击（含 contextmenu）
document.addEventListener('mousedown', (e) => {
  e.preventDefault();
  overlay.style.pointerEvents = 'auto'; // 短暂启用以捕获并吞掉事件
});
document.addEventListener('contextmenu', (e) => e.preventDefault());

// 2. 阻止触摸开始（避免触发点击或拖拽）
document.addEventListener('touchstart', (e) => {
  e.preventDefault();
  overlay.style.pointerEvents = 'auto';
});

// 3. 交互结束时立即恢复透传（关键！保证后续 wheel/touchmove 正常）
document.addEventListener('mouseup', () => {
  overlay.style.pointerEvents = 'none';
});
document.addEventListener('touchend', () => {
  overlay.style.pointerEvents = 'none';
});

//  wheel 和 touchmove 无需处理 —— 它们天然穿透 pointer-events: none 的遮罩层

这段代码做了三件事：当用户尝试点击（mousedown）或开始触摸（touchstart）时，立即阻止事件的默认行为，并临时将遮罩层的 pointer-events 设为 auto。这个操作就像一个瞬间闭合的阀门，确保这次点击或触摸被遮罩层“吸收”，不会传递到底层内容上。紧接着，在鼠标抬起（mouseup）或触摸结束（touchend）时，阀门迅速重新打开（pointer-events: none），为接下来的滚动事件让路。

至于 wheel（鼠标滚轮）和 touchmove（触摸移动）事件，完全不需要处理。因为它们在设计上会穿透 pointer-events: none 的元素，浏览器的原生滚动机制得以完美保留。

注意事项与最佳实践

为了让这个方案更稳健，有几个细节需要特别注意：

• 不要监听 wheel 或 touchmove：这是最常见的误区。主动拦截这些事件反而会破坏浏览器原生的滚动惯性和精度，画蛇添足。
• 避免在 scroll 事件中使用全局 preventDefault()：这会导致整个页面的滚动被禁用，与目标背道而驰。
• pointer-events: auto 仅作临时“吸点”用途：这是方案的关键。必须在交互结束后立刻恢复为 none，否则遮罩层可能会意外捕获到滚动起始点，尤其在触屏设备上，会导致滚动无法开始。
• 移动端兼容性增强（可选）：对于绝大多数场景，上述方案已足够健壮。如果追求极致的控制，可以监听 touchmove，并通过检查 e.touches.length > 1 忽略多指缩放，或检查 e.cancelable === false 避免干扰系统级滚动（如 iOS 的橡皮筋效果）。
• 无障碍考量：需要明确的是，此方案主要拦截指针事件。键盘导航（如 Tab 键切换焦点、Enter 键激活）仍然有效。如果需要完全禁用交互，属于更进阶的无障碍需求，通常需要额外设置 tabindex="-1"、aria-hidden="true" 并管理焦点流，这超出了本方案的基础范畴。

总的来说，这个方案将加载遮罩设计成了一个真正“无感”的通用组件。只需在页面中插入一个具备特定 ID 的遮罩层