本文介绍如何让两个并排、高度不同的 div 在页面滚动时同步滚动，并在较短容器触底后自动吸附至视口底部，直至较长容器滚动结束，再恢复常规滚动行为。
本文介绍如何让两个并排、高度不同的 div 在页面滚动时同步滚动，并在较短容器触底后自动吸附至视口底部，直至较长容器滚动结束，再恢复常规滚动行为。
要实现「双列不同高度容器的协同滚动 + 底部吸附」效果，核心在于巧妙利用 position: sticky 的相对定位特性，而非依赖 JavaScript 监听滚动事件——这既轻量又符合现代 CSS 最佳实践。
原理简析
position: sticky 的行为取决于其 top（或 bottom）偏移值与容器滚动位置的关系。当元素滚动到距视口顶部 top 指定距离时，它开始“粘住”；而当它的父容器（或包含块）不足以继续支撑该粘性行为时，它会自然脱离。关键点在于：top 值并非必须为非负数——负值可实现“提前触发粘性”，从而模拟“触底后悬停”的视觉效果。
在本例中：
- .left 高 200vh（长列），.right 高 120vh（短列），差值为 80vh；
- 但注意：.right 要在自身内容底部抵达视口底部时停止滚动，即需在其自然滚动结束前 80vh 就进入 sticky 状态，并以 top: -80vh 锚定——这样当它滚动到视口底部时，因 sticky 容器（.parent）仍持续滚动，.right 会被“托住”不动，直到 .left 也滚动到底部。
然而原答案中 top: -20vh 是笔误（应为 -80vh）。正确计算方式为：
top = -(tallerHeight - shorterHeight) = -(200vh - 120vh) = -80vh
完整可运行代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>双列协同滚动示例</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow-x: hidden; }
.parent {
display: flex;
height: 100vh;
overflow: visible; /* 确保 sticky 正常工作 */
}
.child {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
position: sticky;
top: 0; /* 基准线：初始粘性起点为视口顶部 */
z-index: 1;
}
.left {
background: lightblue;
height: 200vh;
/* 长列无需额外 top 偏移 */
}
.right {
background: lightcoral;
height: 120vh;
/* 关键：负 top 值使其在滚动早期即进入 sticky 状态，
从而在自身内容底部到达视口底部时“卡住” */
top: -80vh;
}
/* 可选：增强可读性 */
.child > div {
padding: 1rem;
font-weight: bold;
}
</style>
</head>
<body>
<div class="parent">
<div class="child left">
<div>Left Top</div>
<div>Left Bottom</div>
</div>
<div class="child right">
<div>Right Top</div>
<div>Right Bottom</div>
</div>
</div>
</body>
</html>注意事项与兼容性提示
- ✅ 浏览器支持：position: sticky 已被所有现代浏览器（Chrome 56+、Firefox 59+、Safari 15.4+、Edge 79+）完整支持；旧版 Safari 需加 -webkit-sticky 前缀（如需兼容 iOS < 15.4）。
- ⚠️ 父容器要求：.parent 必须有明确的高度（如 height: 100vh）且不能设置 overflow: hidden，否则 sticky 元素将失效。
- ⚠️ 避免嵌套干扰：确保 .child 的直接父级（即 .parent）是其最近的滚动容器；若存在中间层 overflow: auto/scroll，sticky 行为将基于该层而非视口。
- ? 扩展建议：如需更精细控制（如动态高度、响应式适配），可结合 IntersectionObserver 或 scroll() API 实现 JavaScript 回退方案，但纯 CSS 方案已能满足绝大多数场景。
通过合理设置 top 偏移与容器高度关系，即可零 JS 实现优雅的双列滚动协同与吸附效果——简洁、高效、语义清晰。
