如何在固定悬浮控件上实现底层滚动区域的穿透式滚动控制-html教程-PHP中文网

如何在固定悬浮控件上实现底层滚动区域的穿透式滚动控制

本文介绍一种纯前端技术方案：通过监听 wheel 事件将鼠标滚轮操作“转发”至被遮挡的可滚动元素，从而在保持顶层固定控件（如悬浮面板、工具栏）完全可交互的前提下，允许用户在其上方直接滚动其下方的 position: fixed 滚动容器。

本文介绍一种纯前端技术方案：通过监听 `wheel` 事件将鼠标滚轮操作“转发”至被遮挡的可滚动元素，从而在保持顶层固定控件（如悬浮面板、工具栏）完全可交互的前提下，允许用户在其上方直接滚动其下方的 `position: fixed` 滚动容器。

在现代 Web 布局中，常需叠加多个 position: fixed 元素（例如悬浮按钮、调试面板、实时通知窗），而其中某一层（如 #overlay）又需支持独立滚动。此时若 #widget 完全覆盖于 #overlay 之上，原生滚动行为会被阻断——因为滚动事件仅触发于当前鼠标悬停的最上层元素，且 pointer-events: none 会彻底禁用交互，违背“控件需完整响应点击、拖拽、hover 等操作”的需求。

核心思路：事件委托 + 滚动代理
不依赖 CSS 隐藏指针事件，而是利用 JavaScript 捕获 wheel 事件，并手动触发目标滚动容器的滚动。该方案保留 #widget 的全部 pointer-events: auto 行为（点击、悬停、focus 等均正常），仅对滚轮动作做定向转发。

以下为完整实现：

<div id="parent">
  <div id="overlay">
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <!-- ... 更多内容 -->
  </div>
  <div id="parent-content">...</div>
  <div id="widget">Scroll on Me<br>Click on Me</div>
</div>

/* 关键样式保持不变 */
#overlay {
  position: fixed;
  top: 25%; left: 25%; bottom: 25%; right: 25%;
  background-color: red;
  z-index: 1;
  overflow-y: auto; /* 必须启用原生滚动能力 */
}

#widget {
  position: fixed;
  top: 50%; left: 50%;
  width: 100px; height: 100px;
  margin: -50px 0 0 -50px;
  background: gold;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

const $ = document.querySelector.bind(document);
const overlay = $('#overlay');
const widget = $('#widget');

// ✅ 保留所有交互：点击、focus、hover 均不受影响
widget.addEventListener('click', () => alert('Widget clicked!'));

// ✅ 滚轮事件穿透：监听 widget 上的 wheel，并转发至 overlay
widget.addEventListener('wheel', (e) => {
  e.preventDefault(); // 阻止默认行为（避免页面级滚动）

  // 根据 wheel.deltaY 动态计算滚动方向与幅度
  const scrollStep = 40; // 可调灵敏度
  const delta = e.deltaY > 0 ? scrollStep : -scrollStep;

  overlay.scrollBy({
    top: delta,
    behavior: 'smooth' // 可选：启用平滑滚动提升体验
  });
});

注意事项与增强建议：

✅ e.preventDefault() 至关重要：防止 wheel 事件冒泡至导致整页滚动；
✅ 使用 scrollBy({ top, behavior }) 而非 scrollTop += delta，以兼容 overflow: hidden 容器及平滑动画；
⚠️ 若 #overlay 内容高度动态变化（如加载更多），需监听其尺寸变更并重置滚动边界；
? 进阶可扩展：结合 e.deltaX 支持横向滚动；添加防抖避免高频触发；或通过 getBoundingClientRect() 判断 widget 是否真正覆盖在 overlay 可视区域内再转发；
? 兼容性：wheel 事件和 scrollBy() 在现代浏览器（Chrome 61+, Firefox 67+, Safari 15.4+）中已全面支持。