本文介绍通过 javascript 监听非滚动区域（如底部 div）的 wheel 事件，并将其转化为目标滚动容器（如全屏背景图）的滚动行为，从而实现“鼠标在页面任意位置均可滚动背景图”的交互效果。
本文介绍通过 javascript 监听非滚动区域（如底部 div）的 wheel 事件，并将其转化为目标滚动容器（如全屏背景图）的滚动行为，从而实现“鼠标在页面任意位置均可滚动背景图”的交互效果。
在实际 Web 开发中，常遇到一种典型交互需求：一个占据全屏的、带 overflow: auto 或 scroll 的背景图容器（例如
），其内容需支持垂直滚动；但页面底部另有一个固定或静态的
区域（如操作栏、页脚）。此时，由于 #bottom 不属于滚动容器的子元素，且自身无滚动能力，当鼠标悬停其上时，原生滚动事件（wheel）会被该元素或文档根节点捕获，无法自然传导至背景图容器——导致用户必须将鼠标移回图片区域才能滚动，体验割裂。
解决思路是主动劫持并重定向滚动事件：监听 #bottom 上的 wheel 事件，阻止默认行为（避免页面跳动或无效响应），再手动更新 #image 的 scrollTop 值，模拟滚动效果。
以下是核心实现代码：
const image = document.getElementById('image');
const bottom = document.getElementById('bottom');
function onBottomWheel(event) {
event.preventDefault(); // 阻止默认滚动行为（如页面滚动或事件冒泡）
// 使用 event.deltaY（标准 API）替代已废弃的 wheelDeltaY，兼容性更佳
image.scrollTop += event.deltaY;
}
bottom.addEventListener('wheel', onBottomWheel);✅ 关键说明与最佳实践：
- 优先使用 event.deltaY：wheelDeltaY 属于旧版 WebKit/Blink 特有属性，已被现代标准废弃；deltaY 是 W3C 标准属性，返回以像素为单位的滚动偏移量（正数表示向下滚动，负数为向上），语义清晰且跨浏览器稳定。
- 无需手动判断方向：image.scrollTop += event.deltaY 自动适配滚轮上下方向，比 image.scrollTop = image.scrollTop - event.wheelDeltaY 更简洁可靠。
- 可扩展至其他区域：同理，可为导航栏、侧边栏等非滚动区添加相同逻辑，统一控制主内容滚动。
- 性能考虑：wheel 事件触发频繁，若后续需添加防抖或平滑滚动（如 scrollBy({ top: event.deltaY, behavior: 'smooth' })），建议结合 requestAnimationFrame 优化。
⚠️ 注意事项：
- 确保 #image 具备可滚动条件（如设置 height + overflow-y: auto，且内部内容高度超出容器）；
- 若 #bottom 本身需局部滚动（如内含长列表），应避免事件监听冲突，可通过 event.target === bottom 进行精确判断；
- 在移动端 Safari 中，wheel 事件支持有限，如需触控板/触摸滚动兼容，建议补充 touchmove 监听与手势映射逻辑。
通过上述方案，开发者能彻底解耦滚动触发区域与滚动目标容器，显著提升交互自由度与用户体验一致性。
