通过监听 wheel 事件并动态判断边缘列是否已滚动到底/顶，将剩余滚动量传递至中心列，可实现跨列无缝滚动体验，无需依赖框架，纯 javascript 即可完成。
通过监听 wheel 事件并动态判断边缘列是否已滚动到底/顶，将剩余滚动量传递至中心列，可实现跨列无缝滚动体验，无需依赖框架，纯 javascript 即可完成。
在三栏布局中（如典型的 Twitter/X 网页结构），左右栏宽度固定、中间栏自适应，各列均启用 overflow: auto 实现独立垂直滚动。但当用户鼠标位于内容较短的右栏并滚动鼠标滚轮时，页面常出现“卡顿”或“无响应”现象——这是因为浏览器默认仅滚动当前 hover 元素，而右栏早已触底，无法继续响应。理想行为是：一旦右栏（或左栏）滚动至边界，后续滚动操作应自动“透传”至中心列继续滚动。
该效果可通过原生 JavaScript 高效实现，核心逻辑如下：
- 监听所有侧边栏的 wheel 事件（避免绑定到 document，以确保精准捕获目标区域滚动意图）；
-
实时判断当前列是否已达滚动极限：
- 向下滚动（deltaY > 0）且 scrollTop + clientHeight ≥ scrollHeight → 已到底部；
- 向上滚动（deltaY
- 满足条件时，阻止默认行为，并将 deltaY 累加至中心列的 scrollTop，实现平滑接力滚动。
以下为生产就绪的 Vanilla JS 实现（无 jQuery 依赖）：
<div class="container"> <div class="col side" id="left"></div> <div class="col center" id="center"></div> <div class="col side" id="right"></div> </div>
.container {
display: flex;
position: fixed;
inset: 0;
width: 100%;
}
.col {
height: 100%;
overflow: auto;
}
.side {
width: 200px;
}
.center {
flex: 1;
background-color: #f5f5f5;
}
#left { background-color: #4a90e2; }
#right { background-color: #e74c3c; }
// 获取中心列 DOM 引用
const centerCol = document.getElementById('center');
const sideCols = document.querySelectorAll('.side');
// 统一滚动透传处理函数
function handleWheel(e) {
e.preventDefault(); // 阻止默认滚动，由我们接管
const target = e.target;
const delta = e.deltaY;
// 判断是否已到达目标列的滚动边界
const isAtTop = target.scrollTop === 0 && delta 0;
if (isAtTop || isAtBottom) {
// 将滚动量应用到中心列（带边界保护）
const newScroll = Math.max(
0,
Math.min(centerCol.scrollHeight - centerCol.clientHeight, centerCol.scrollTop + delta)
);
centerCol.scrollTop = newScroll;
}
}
// 为所有侧边栏绑定事件
sideCols.forEach(col => col.addEventListener('wheel', handleWheel));
✅ 关键优势与注意事项：
- 零依赖：不依赖 jQuery 或任何第三方库，兼容现代浏览器（Chrome/Firefox/Safari/Edge）；
- 精准控制：仅在侧边栏真正触边时才透传，避免误触发；
- 边界防护：Math.max/min 确保中心列不会滚动超出其实际范围；
- 移动端说明：此方案基于 wheel 事件，不适用于触摸板惯性滚动或手机触屏拖拽；如需全平台支持，需额外监听 touchmove 并结合 scrollend 或节流判断，但复杂度显著上升；
- 无障碍友好：保持键盘 PageUp/PageDown 及空格键滚动行为不变，因这些事件不受 wheel 监听影响。
该模式已被 Twitter/X 等主流产品验证，是提升多列布局交互一致性的最佳实践之一。只需少量代码，即可让您的三栏页面告别“滚动断裂”，提供真正连贯的浏览体验。
