本文介绍如何通过 javascript 实现“全局滚动穿透”——即使鼠标悬停在非滚动容器（如底部 div）上，也能无缝控制页面中独立滚动的背景图片，无需用户将光标移至图片区域。
本文介绍如何通过 javascript 实现“全局滚动穿透”——即使鼠标悬停在非滚动容器（如底部 div）上，也能无缝控制页面中独立滚动的背景图片，无需用户将光标移至图片区域。
在构建全屏视觉型网页时，常需设置一个固定尺寸、可独立垂直滚动的背景图容器（例如 <div id="image">），同时页面底部叠加一层功能性的 div（如导航栏、操作面板等）。此时默认行为是：滚动事件仅在目标元素（即 #image）内触发才生效；一旦鼠标移入 #bottom 区域，原生滚动便失效——这严重破坏了用户体验的一致性。
解决该问题的核心思路是：主动捕获并重定向滚动事件。由于 #bottom 本身不参与滚动，我们需要监听其上的 wheel 事件，阻止默认行为，并手动将滚轮偏移量（event.wheelDeltaY 或更现代的 event.deltaY）映射到目标滚动容器（#image）的 scrollTop 属性上。
以下是完整、健壮的实现代码（兼容现代浏览器，推荐使用 deltaY 以支持触控板与高精度滚轮）：
const image = document.getElementById('image');
const bottom = document.getElementById('bottom');
function handleGlobalScroll(event) {
event.preventDefault(); // 阻止 #bottom 自身滚动（若其可滚动）或页面整体滚动
// 使用 deltaY 更可靠（wheelDeltaY 已废弃，且存在正负方向差异）
image.scrollTop += event.deltaY;
}
// 同时监听 #bottom 及其他需要“穿透”的区域（如 header、overlay 等）
bottom.addEventListener('wheel', handleGlobalScroll, { passive: false });✅ 关键注意事项：
- 必须添加 { passive: false } 选项，否则 event.preventDefault() 在 Chrome/Firefox 中将被忽略；
- 若页面存在多个非滚动但需触发背景滚动的区域（如悬浮按钮、侧边栏），可统一绑定相同事件处理器；
- 为提升响应精度，建议对 deltaY 做轻微缩放（如 * 1.2）或添加防抖（适用于高频滚动场景）；
- 若 #image 内容高度不足导致无法滚动，scrollTop 将自动被截断，无需额外边界检查；
- 如需支持键盘方向键或空格键滚动，可扩展监听 keydown 事件并模拟相同逻辑。
最终效果是：无论鼠标位于页面何处，上下滚动均实时驱动背景图位移，交互自然、无感知切换——真正实现“滚动解耦”，兼顾视觉表现与操作自由度。
