本文介绍一种基于 Intersection Observer 和 wheel 事件的纯 JavaScript 方案，实现在页面滚动过程中，当高尺寸 sticky 区域进入视口时，自动将滚动焦点从 body 切换至其内部可滚动容器；离开该区域后恢复默认文档滚动，全程无需用户手动操作子容器。
本文介绍一种基于 intersection observer 和 `wheel` 事件的纯 javascript 方案，实现在页面滚动过程中，当高尺寸 sticky 区域进入视口时，自动将滚动焦点从 body 切换至其内部可滚动容器；离开该区域后恢复默认文档滚动，全程无需用户手动操作子容器。
在构建长页面中含多个 sticky 区块（如横向时间轴、分步表单或卡片堆叠区）时，常遇到如下交互痛点：区块本身高度远超视口（例如 2000px），但其内部 .content 又设置了固定高度与 overflow-y: scroll——此时若仅靠自然文档流滚动，用户无法浏览区块全部内容，而手动点击拖拽 .content 又破坏“单滚动条”体验。
理想的滚动行为应是：
✅ 滚动 body 时，当 sticky <section></section> 顶部刚进入视口 → 自动接管滚动，使 .content 内部滚动；
✅ 继续向下滚，直到 <section></section> 底部即将离开视口底部 → 停止接管，交还滚动控制权给 body；
✅ 整个过程无跳变、不卡顿、兼容触控板/鼠标滚轮，且 TypeScript 类型安全。
✅ 核心实现逻辑
我们采用「观察 + 动态劫持」策略：
- 使用
IntersectionObserver监听<section></section>是否进入视口（threshold: 0即可）； - 进入后立即为
document.body绑定wheel事件监听器； - 在事件处理器中，通过计算当前
window.pageYOffset与<section></section>的offsetTop、offsetHeight关系，动态判断是否处于「应滚动子容器」区间； - 若处于该区间，则调用
section.scrollBy(0, event.deltaY)并event.preventDefault()阻止默认 body 滚动； - 否则放行，维持原生滚动。
⚠️ 注意：
event.deltaY在标准WheelEvent中存在，但若 TypeScript 报错Property 'deltaY' does not exist on type 'Event'，请务必显式声明事件类型为WheelEvent，而非泛型Event。
✅ 完整可运行代码（TypeScript 友好）
const section = document.querySelector('section') as HTMLElement | null;
if (!section) throw new Error('Section not found');
const content = section.querySelector('.content') as HTMLElement | null;
if (!content) throw new Error('Content container not found');
// Step 1: 监听 section 进入视口
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
handleSectionScroll();
} else {
// 离开视口时清理监听器，避免内存泄漏
document.body.removeEventListener('wheel', scrollHandler);
}
});
},
{ threshold: 0 }
);
observer.observe(section);
// Step 2: 定义滚动接管逻辑
let isSectionScrolling = false;
const scrollHandler = (e: WheelEvent) => {
if (!isSectionScrolling) return;
const rect = section.getBoundingClientRect();
const scrollTop = window.pageYOffset;
const sectionTop = rect.top + scrollTop; // 转换为文档坐标
const sectionBottom = sectionTop + rect.height;
// 判断当前滚动位置是否处于 section 的“可接管区间”
// 即：body 滚动位置已到达 section 顶部，且尚未滚过其底部（预留 viewport 高度缓冲）
const viewportHeight = window.innerHeight;
const isInScrollZone =
scrollTop >= sectionTop &&
scrollTop <= sectionBottom - viewportHeight;
if (isInScrollZone) {
// 向 .content 内部滚动（更精准：应滚动 content，而非 section）
content.scrollBy(0, e.deltaY);
e.preventDefault(); // 关键：阻止 body 默认滚动
}
};
const handleSectionScroll = () => {
isSectionScrolling = true;
document.body.addEventListener('wheel', scrollHandler, { passive: false });
};? 关键优化点说明
-
滚动目标精准化：示例中实际应调用
content.scrollBy()而非section.scrollBy()，因section本身无overflow，真正可滚动的是.content； -
被动监听器必须设为
passive: false：否则preventDefault()无效，导致 body 仍会滚动； -
动态启停机制：
IntersectionObserver回调中根据isIntersecting开关监听器，避免重复绑定或遗漏解绑； -
防抖与性能：如需更高性能（尤其高频滚轮场景），可在
scrollHandler内添加requestAnimationFrame节流； -
触控设备兼容性：现代浏览器中
wheel事件同样响应触控板惯性滚动，无需额外处理touchmove（除非需支持 iOS Safari 旧版本）。
✅ 总结
该方案以最小侵入方式实现了“滚动焦点智能迁移”，既保持了单滚动条的简洁交互，又解决了 sticky 区域内容溢出不可见的问题。它不依赖第三方库，完全基于现代 Web API，适用于 Vue/React 等框架项目（只需在 mounted / useEffect 中初始化），是复杂滚动交互场景下的轻量级工业级解法。
