本文详解如何利用 position: sticky 与现代 CSS 滚动动画（animation-timeline: scroll()）实现「当前内容滚动时，始终在视口底部固定预览下一部分内容」的效果，适用于新闻流、分页文章等场景。
本文详解如何利用 `position: sticky` 与现代 css 滚动动画（`animation-timeline: scroll()`）实现「当前内容滚动时，始终在视口底部固定预览下一部分内容」的效果，适用于新闻流、分页文章等场景。
在构建沉浸式长页面（如媒体网站、产品介绍页）时，一个常见且高体验的设计需求是：当用户浏览当前区块（.current-content）时，下一块内容（.next-content）以半屏高度（50vh）悬浮于视口底部作为预览；随着滚动继续，该预览自然过渡为可滚动主内容——即“无缝衔接的滚动预览”。
然而，仅靠 position: sticky 的 bottom 属性无法精准控制预览高度，因为 bottom: -50vh 的行为依赖于元素自身高度，而 .next-content 高度未知且动态，导致其无法稳定占据视口下半部分。
✅ 推荐方案：animation-timeline: scroll(y) + 分层覆盖控制（现代 CSS 解法）
这是目前最接近原生滚动体验的纯 CSS 方案，核心思路是：
- 将
.current-content设为height: 50vh并允许内部滚动； - 使用伪元素覆盖
.current-content下方区域，制造“视觉占位”； - 利用
animation-timeline: scroll(y)监听.next-content进入视口的时机； - 在临界点动态提升
.next-content的z-index并调整top/padding-top，使其“浮现”并接管滚动。
✅ 完整可运行代码示例
<div class="wrapper">
<div class="current-content">
<div class="content-wrapper">
<p>start1</p>
<p>hi 2</p>
<p>hi 3</p>
<!-- ... 更多内容 -->
<p style="margin-bottom: 0">end1</p>
</div>
</div>
<div class="next-content">
<p style="margin-top: 0">start2</p>
<p>hi</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>hi</p>
<!-- ... 更多内容 -->
<p>end2</p>
</div>
</div>
p {
font-size: 28px;
margin: 20px 0;
}
.wrapper {
isolation: isolate; /* 创建独立堆叠上下文 */
height: 100vh;
overflow: auto;
scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
.wrapper::-webkit-scrollbar { display: none; } /* Chrome/Safari 隐藏 */
.current-content {
background: #fff9c4; /* yellow 变体，更易读 */
padding-bottom: 50vh;
height: 50vh;
width: 100%;
overflow: auto;
scrollbar-width: none;
}
.current-content::-webkit-scrollbar { display: none; }
.content-wrapper::after {
content: "";
position: absolute;
top: 50vh;
left: 0;
width: 100%;
height: 50vh;
z-index: 2;
pointer-events: none; /* 确保不阻断滚动 */
}
.next-content {
background: #f8bbd0; /* pink 变体 */
position: relative;
top: -50vh;
animation: offset-next 1ms linear both;
animation-timeline: scroll(y); /* 关键：绑定垂直滚动进度 */
}
@keyframes offset-next {
from { z-index: 1; }
0.01% {
top: -100vh;
padding-top: 50vh;
z-index: 3;
}
to {
top: -100vh;
padding-top: 50vh;
z-index: 3;
}
}
? 关键说明：
animation-timeline: scroll(y)会将动画时间轴映射到整个文档的垂直滚动位置（0% = 元素顶部进入视口，100% = 底部离开视口）。此处0.01%触发点即代表.next-content顶部刚触达视口底部的瞬间，此时立即激活预览浮出逻辑。
⚠️ 注意事项与兼容性提醒
-
浏览器支持：
animation-timeline目前仅 Chromium 内核（Chrome 115+、Edge 115+、Opera 101+）支持，Firefox 和 Safari 暂不支持。生产环境需配合 JavaScript 回退（如 IntersectionObserver + class 切换）。 -
移动端限制：iOS Safari 和部分安卓 WebView 对滚动链（scroll chaining）处理不同，可能导致
scroll(y)行为异常；建议在移动端降级为传统锚点跳转或 JS 驱动。 -
滚动条体验：本方案隐藏了主滚动条（视觉上“单滚动”），但实际仍存在两层嵌套滚动逻辑。若需可见滚动条，需额外通过
transform: translateY()+pointer-events动态控制，复杂度显著上升。 -
无障碍考量：浮动预览可能干扰屏幕阅读器顺序流，建议为
.next-content添加aria-hidden="true"直至其成为焦点内容，并在切换时触发aria-live提示。
✅ 替代方案（兼容性优先）
若需全浏览器支持，推荐使用轻量 JS 方案：
const nextEl = document.querySelector('.next-content');
const observer = new IntersectionObserver(
([entry]) => {
nextEl.classList.toggle('is-preview', entry.intersectionRatio <p>配合 CSS：</p><pre class="brush:php;toolbar:false;">.next-content.is-preview {
position: sticky;
bottom: 0;
height: 50vh;
overflow: hidden;
}该方案兼顾语义化、可访问性与广泛兼容性，是上线项目的稳妥选择。
综上，animation-timeline: scroll() 是面向未来的优雅解法，适合实验性项目或目标用户明确为新版 Chrome 的场景；而 IntersectionObserver + CSS 的组合，则是当下兼顾体验与落地性的黄金标准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
