本文详解如何通过监听 wheel 事件并结合防默认、平滑插值与 requestAnimationFrame，实现左侧区域滚动时驱动右侧内容平滑同步滚动，同时避免页面整体跳转或 footer 提前显示。
本文详解如何通过监听 `wheel` 事件并结合防默认、平滑插值与 requestanimationframe，实现左侧区域滚动时驱动右侧内容平滑同步滚动，同时避免页面整体跳转或 footer 提前显示。
在构建双栏布局（如图文对照、目录-内容联动）时，常需实现“滚动穿透”效果：用户在左栏（如图片容器）滚动时，不触发自身或 滚动，而是精准控制右栏（如文字描述）的 scrollTop。原始的 scroll 事件监听方案（如 column1.addEventListener('scroll', ...)）存在根本缺陷——它仅在左栏实际发生滚动后才触发，而左栏本身因内容过短可能根本无法滚动，导致逻辑失效。
正确的解法是拦截原生滚动行为，主动将滚轮位移（deltaY）映射到目标元素。核心步骤如下：
✅ 正确监听与拦截：使用 wheel + preventDefault()
document.addEventListener('DOMContentLoaded', () => {
const column1 = document.getElementById('column-1');
const column2 = document.getElementById('column-2');
// 关键：必须设置 { passive: false }，否则 preventDefault() 无效
column1.addEventListener('wheel', (ev) => {
column2.scrollTop += ev.deltaY;
ev.preventDefault(); // 阻止默认滚动（包括冒泡到 body）
}, { passive: false });
});⚠️ 注意：现代浏览器对
wheel事件默认启用passive: true以提升性能，若不显式声明passive: false，调用ev.preventDefault()将被忽略且控制台报错。
✅ 进阶优化：实现平滑滚动惯性效果
直接累加 deltaY 会导致滚动生硬、无缓冲。为模拟原生滚动的“惯性减速”，可引入简易物理模型：
- 滚动速度
speed初始由deltaY驱动； - 每帧按指数衰减（
easingFactor = 0.9）； - 使用
requestAnimationFrame实现 60fps 平滑渲染。
const column1 = document.getElementById('column-1');
const column2 = document.getElementById('column-2');
let speed = 0;
let lastUpdateTime = 0;
const speedFactor = 5; // 调整数值控制响应灵敏度（越小越灵敏）
column1.addEventListener('wheel', (ev) => {
speed = ev.deltaY / speedFactor;
ev.preventDefault();
}, { passive: false });
function update(deltaTime) {
const easingFactor = 0.9;
speed *= easingFactor; // 惯性衰减
}
function render() {
column2.scrollTop += speed;
// 边界处理：防止 scrollTop 超出范围
const maxScroll = column2.scrollHeight - column2.clientHeight;
column2.scrollTop = Math.max(0, Math.min(column2.scrollTop, maxScroll));
}
function gameLoop(currentTime) {
const deltaTime = currentTime - lastUpdateTime;
update(deltaTime);
render();
lastUpdateTime = currentTime;
requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);✅ 必要的 CSS 配合
确保两列均具备独立滚动能力且高度可控：
.column-1, .column-2 {
width: 50%;
overflow-y: auto; /* 启用内部滚动 */
max-height: 100vh; /* 限制最大高度，避免撑开 body */
}
.content {
display: flex;
height: 100vh; /* 全屏高度，不依赖 body 滚动 */
overflow: hidden; /* 防止 content 自身出现滚动条 */
}
body {
margin: 0;
height: 100vh; /* 确保 body 不产生额外滚动空间 */
}? 关键注意事项
-
滚动方向一致性：若左右栏内容高度差异大，需在
render()中添加边界检测（如示例中的Math.max/min），避免scrollTop超出有效范围导致空白或卡顿。 -
移动端兼容性：
wheel事件在 iOS Safari 中可能不触发，如需支持触控板/触摸滚动，应补充touchstart/touchmove逻辑（本文聚焦桌面端基础方案）。 -
无障碍考量：同步滚动可能影响屏幕阅读器体验，建议为
.column-1添加aria-hidden="true"，并确保.column-2内容语义完整、可独立访问。
通过以上方案，用户在左栏任意位置滚动时，右栏将实时、平滑地响应，当右栏内容滚动到底部后，页面自然展示 <footer></footer>，完美达成“滚动驱动内容，内容决定页面终点”的交互目标。
