本文介绍如何通过 javascript 动态同步两个垂直滚动容器的滚动位置，消除传统嵌套滚动中常见的“卡顿停顿”，实现视觉连贯、无中断的平滑过渡效果。
本文介绍如何通过 javascript 动态同步两个垂直滚动容器的滚动位置，消除传统嵌套滚动中常见的“卡顿停顿”，实现视觉连贯、无中断的平滑过渡效果。
在单页应用或长内容布局中，常需将内容分段置于多个独立滚动容器（如 .child 与后续 .child2）中，期望用户滚动到底部时，视觉上能自然衔接到下一区域——而非出现明显停顿或跳变。原生 HTML 的 overflow: scroll 无法跨容器联动滚动，因此必须借助 JavaScript 实现滚动位置映射 + 视觉位移模拟。
核心思路是：监听首个容器（#container1）的 scroll 事件，将其滚动进度（0%～100%）实时转换为第二个容器（#container2）的 transform: translateY() 值，使其“跟随”滚动，形成连贯的视觉流。关键在于避免直接设置 scrollTop（易触发重排与抖动），而采用硬件加速的 transform 进行位移模拟。
以下为可直接运行的完整实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Scroll Transition</title>
<style>
.App {
font-family: sans-serif;
text-align: center;
overflow: hidden;
height: 100vh;
}
.parent {
display: flex;
flex-direction: column;
height: 100%;
}
.child, .child2 {
padding: 20px;
overflow-y: hidden; /* 关键：禁用自身滚动，由 transform 控制视觉位移 */
height: 100%;
will-change: transform; /* 提升性能，提示浏览器优化 transform 动画 */
}
.child {
background: #fff;
}
.child2 {
background-color: #f9f9f9;
border-top: 1px solid #eee;
}
</style>
</head>
<body>
<div class="App">
<div class="parent">
<div class="child" id="container1">
<!-- 第一段长文本内容（同原示例） -->
<p>Lorem ipsum dolor sit amet...（略）</p>
<p>Etiam sed dui placerat...（略）</p>
<p>Phasellus tincidunt sem...（略）</p>
</div>
<div class="child2" id="container2">
<!-- 第二段长文本内容（同原示例） -->
<p>Lorem ipsum dolor sit amet...（略）</p>
<p>Etiam sed dui placerat...（略）</p>
<p>Phasellus tincidunt sem...（略）</p>
</div>
</div>
</div>
<script>
const container1 = document.getElementById('container1');
const container2 = document.getElementById('container2');
// 启用 passive: true 提升滚动事件性能（尤其移动端）
container1.addEventListener('scroll', () => {
// 计算滚动百分比：0 → 完全顶部，1 → 完全底部
const scrollRatio = container1.scrollTop / (container1.scrollHeight - container1.clientHeight);
// 计算 container2 应偏移的像素值（负值向上移动）
const maxOffset = container2.scrollHeight - container2.clientHeight;
const translateY = -scrollRatio * maxOffset;
// 使用 transform 实现高性能位移
container2.style.transform = `translateY(${translateY}px)`;
}, { passive: true });
</script>
</body>
</html>✅ 关键优化点说明：
- overflow-y: hidden：关闭 container2 自身滚动，防止双滚动冲突；所有位移均由 transform 驱动。
- will-change: transform：显式告知浏览器该元素将频繁变换，触发 GPU 加速渲染。
- passive: true：避免滚动事件默认行为被阻止，大幅提升滚动流畅度（尤其在 iOS Safari 中）。
- 滚动比例映射：使用 (scrollTop / scrollHeight) 确保两容器滚动节奏严格一致，无论内容高度是否相等。
⚠️ 注意事项：
- 若 container2 内容高度动态变化（如图片懒加载后撑开），需在内容加载完成后重新计算 scrollHeight 并重置偏移逻辑；
- 此方案适用于视觉连续性优先的场景；若需支持 container2 独立滚动（如用户中途想回看），应改用 IntersectionObserver + 锚点跳转方案；
- 在低性能设备上，建议限制 transform 更新频率（如配合 requestAnimationFrame 节流），但本例中因仅依赖 scroll 事件且无复杂计算，通常无需额外节流。
通过此方法，你将获得真正“无感衔接”的滚动体验——用户从第一段滑至末尾时，第二段内容已平滑浮现，全程无停顿、无跳变，显著提升交互沉浸感。
