本文介绍一种纯前端技术方案：通过监听 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+）中已全面支持。
该方案本质是“滚动行为解耦”——将输入设备（鼠标滚轮）与滚动目标（overlay）分离，既满足设计约束，又不牺牲任何交互完整性，是处理复杂固定层叠布局的可靠工程实践。
