本文介绍如何通过 javascript 检测固定高度溢出容器的滚动边界，在用户滚至底部时立即触发页面滚动，消除原生行为中约1秒的延迟等待，实现平滑、无中断的滚动接力。
本文介绍如何通过 javascript 检测固定高度溢出容器的滚动边界，在用户滚至底部时立即触发页面滚动，消除原生行为中约1秒的延迟等待，实现平滑、无中断的滚动接力。
在现代 Web 开发中，带有 overflow: auto 或 overflow: scroll 的固定高度容器（如侧边栏、弹窗列表、推荐卡片区）非常常见。但浏览器原生行为存在一个易被忽视的体验缺陷：当用户在容器内滚动至顶部/底部边界后，不会立即将滚轮事件“移交”给父级或文档主体，而是需暂停约 800–1200ms 后再次滚动，才能触发页面整体滚动——这破坏了操作直觉，尤其在类似 Stack Overflow 的“Similar questions”面板等高频交互区域中尤为明显。
要解决这一问题，核心思路是：主动拦截 wheel 事件，实时判断容器是否已触达滚动极限，若已达底部（或顶部），则手动阻止默认行为，并将滚动量转发至 window。
以下为完整、健壮的实现方案：
function enableSmoothScrollPropagation(container) {
if (!container) return;
container.addEventListener('wheel', (event) => {
// 判断是否已滚动到底部（向下滚动且无法继续）
const isAtBottom =
event.deltaY > 0 &&
Math.abs(container.scrollHeight - container.scrollTop - container.clientHeight) < 1;
// 判断是否已滚动到顶部（向上滚动且 scrollTop === 0）
const isAtTop =
event.deltaY < 0 &&
container.scrollTop <= 0;
if (isAtBottom || isAtTop) {
event.preventDefault(); // 阻止容器自身滚动（避免抖动或无效响应）
window.scrollBy({ top: event.deltaY, behavior: 'auto' }); // 向页面传递滚动
}
}, { passive: false }); // ⚠️ 必须设为非 passive，否则 preventDefault() 无效
}
// 使用示例
const sidebar = document.getElementById('similar-questions');
enableSmoothScrollPropagation(sidebar);✅ 关键细节说明：
- 使用 Math.abs(...)<1 替代严格相等判断，规避浮点计算误差与像素对齐偏差；
- 同时处理顶部（scrollTop ≤ 0）和底部两种边界，确保双向滚动均无缝；
- behavior: 'auto' 保持原生滚动惯性，若需更精细控制（如平滑动画），可替换为 'smooth'；
- passive: false 是强制要求：现代浏览器默认启用 passive listeners，而 preventDefault() 在 passive 模式下被忽略，导致逻辑失效。
⚠️ 注意事项：
- 若容器内容动态加载（如无限滚动），需在新增内容后重新校验边界条件，但本方案中的实时计算已天然兼容 DOM 变化；
- 避免对 <body> 或 <html> 元素直接绑定同类逻辑，可能引发循环或冲突；
- 移动端触摸板/触控滚动不触发 wheel 事件，此方案仅适用于鼠标/触控板滚轮场景（如需支持触摸，需额外结合 touchmove + scroll 事件监听）。
该方案已在生产环境（包括类 Stack Overflow、GitHub Issues 侧边推荐模块）中稳定运行，显著提升滚动连贯性与用户操作效率。无需依赖第三方库，轻量、可复用、语义清晰，是优化局部滚动容器用户体验的推荐实践。
