本文详解如何通过 javascript 监听鼠标滚轮事件，将左侧容器的滚动行为映射到右侧容器，实现跨列滚动联动，并提供平滑滚动优化方案。
本文详解如何通过 javascript 监听鼠标滚轮事件，将左侧容器的滚动行为映射到右侧容器，实现跨列滚动联动，并提供平滑滚动优化方案。
在双栏布局中，有时需要用户在左栏（如图片预览区）滚动时，同步控制右栏（如文字描述区）的滚动位置——而非默认触发整个页面或父容器滚动。原始思路使用 scroll 事件监听并直接同步 scrollTop 值，但该方式存在明显缺陷：scroll 事件不捕获滚轮输入源，且无法阻止默认滚动行为，导致左右栏各自独立滚动、逻辑失效。
正确的做法是监听 wheel 事件，在左栏上拦截滚轮操作，手动计算并应用滚动偏移量至右栏，同时调用 ev.preventDefault() 阻止默认滚动。基础实现如下：
document.addEventListener('DOMContentLoaded', () => {
const column1 = document.getElementById('column-1');
const column2 = document.getElementById('column-2');
column1.addEventListener('wheel', (ev) => {
column2.scrollTop += ev.deltaY;
ev.preventDefault(); // 关键：阻止左栏自身滚动
}, { passive: false }); // 注意：passive 必须设为 false，否则 preventDefault 失效
});
⚠️ 重要前提：CSS 中需确保两栏均设置 overflow-y: auto 且具备可滚动高度（如 max-height: 100vh），否则 scrollTop 操作无效。同时，body 和 html 的 height: 100% 及 margin: 0 设置必须严格，避免布局塌陷干扰滚动容器高度计算。
然而，上述基础方案会产生“跳跃式”滚动体验——因为 deltaY 是瞬时增量，缺乏惯性与缓动。为实现专业级平滑滚动，推荐引入简易物理模拟（基于时间差的阻尼衰减）：
const column1 = document.getElementById('column-1');
const column2 = document.getElementById('column-2');
let scrollSpeed = 0;
let lastTime = 0;
const SPEED_FACTOR = 3; // 调整数值控制响应灵敏度（越小越灵敏）
// 滚轮输入：累积速度，禁用默认行为
column1.addEventListener('wheel', (ev) => {
scrollSpeed += ev.deltaY / SPEED_FACTOR;
ev.preventDefault();
}, { passive: false });
// 渲染循环：应用速度 + 指数衰减
function updateScroll(currentTime) {
const deltaTime = currentTime - lastTime;
lastTime = currentTime;
// 应用当前速度（带像素精度校正）
column2.scrollTop += scrollSpeed;
// 阻尼衰减：模拟滚动惯性
scrollSpeed *= 0.92;
// 当速度趋近于0时归零，避免浮点误差累积
if (Math.abs(scrollSpeed) <p>✅ <strong>关键优化点说明</strong>：</p>
- 使用 requestAnimationFrame 替代 setTimeout，保证 60fps 渲染节奏；
- scrollSpeed *= 0.92 实现自然减速，0.92 可根据手感微调（0.85–0.95 区间）；
- Math.abs(scrollSpeed)
- SPEED_FACTOR 用于缩放滚轮灵敏度，适配不同设备（触控板/鼠标）。
? 扩展建议：
- 若需双向同步（左↔右滚动互控），可为 column2 添加同理 wheel 监听器，反向驱动 column1.scrollTop；
- 对移动端支持，可补充 touchmove 事件监听（需配合 touchstart/touchend 状态管理）；
- 如遇滚动卡顿，检查是否其他 CSS 属性（如 transform、will-change）引发重排，建议对 .column-2 添加 will-change: scroll-position 提升渲染性能。
此方案彻底解耦了滚动源与目标容器，精准实现“视觉焦点在左、内容滚动在右”的交互范式，适用于产品展示页、文档对照阅读等场景。
