本文介绍一种纯前端技术方案：通过监听 widget 元素的 wheel 事件，手动触发底层 overlay 区域的滚动，既保留 widget 完整交互（点击、悬停等），又支持鼠标滚轮直接在 widget 上方滚动其下方的固定 overlay 内容。
本文介绍一种纯前端技术方案：通过监听 widget 元素的 `wheel` 事件，手动触发底层 overlay 区域的滚动，既保留 widget 完整交互（点击、悬停等），又支持鼠标滚轮直接在 widget 上方滚动其下方的固定 overlay 内容。
在现代 Web 布局中，常需在页面上层叠加一个 position: fixed 的交互式组件（如悬浮工具栏、快捷面板或通知小窗），同时保持其下方另一个 fixed 定位的可滚动内容区域（如模态列表、侧边抽屉）仍能响应滚轮操作。但默认情况下，上层元素会拦截所有指针事件（包括 wheel），导致底层滚动失效——而简单设置 pointer-events: none 又会使 widget 自身完全失活。
核心思路：事件委托 + 滚动代理
不依赖 CSS 层级妥协，而是用 JavaScript 将 widget 上捕获的滚轮事件“转发”给目标滚动容器。关键在于：
- 使用原生
wheel事件（比scroll更精准、低延迟，且可捕获未触发默认滚动的行为）； - 利用
event.deltaY判断滚动方向与幅度，实现自然的反向/正向滚动； - 通过
element.scrollBy()进行平滑、可控的滚动偏移（支持behavior: 'smooth'）。
以下是完整可运行的解决方案：
<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;
text-align: center;
font-size: 12px;
}
const $ = (s) => document.querySelector(s);
const overlay = $('#overlay');
const widget = $('#widget');
// ✅ 保留 widget 所有交互（点击、hover 等）
widget.addEventListener('click', () => alert('Widget clicked!'));
// ✅ 滚轮穿透：将 wheel 事件映射为 overlay 的 scrollBy
widget.addEventListener('wheel', (e) => {
e.preventDefault(); // 阻止默认行为（避免页面级滚动干扰）
// 根据 deltaY 精确控制滚动方向和步长（支持惯性/加速）
const scrollStep = Math.abs(e.deltaY) > 1 ? e.deltaY : e.deltaY > 0 ? 40 : -40;
overlay.scrollBy({ top: scrollStep, behavior: 'smooth' });
});
注意事项与增强建议：
- ⚠️ 必须调用
e.preventDefault()，否则浏览器可能触发父容器或页面滚动； - ?
scrollBy()接收对象参数（推荐写法），便于未来扩展behavior或left偏移； - ? 若需支持水平滚动，可同步处理
e.deltaX； - ? 如 widget 内含子控件（按钮、输入框），该方案完全兼容——因其不修改
pointer-events，所有子元素事件照常冒泡； - ? 兼容性良好：
wheel事件和scrollBy()均支持 Chrome 31+、Firefox 17+、Safari 13.1+、Edge 12+。
该方案以最小侵入性解决「交互与滚动并存」的经典布局难题，无需重构 DOM 结构或引入第三方库，是 CSS 无法覆盖场景下稳健可靠的 JavaScript 补充策略。
