本文介绍如何利用 CSS 滚动驱动动画（Scroll-Driven Animations），在用户滚动至页面底部时，仅为固定定位的 Cookie 提示栏动态添加 margin-bottom，避免初始渲染时就出现多余空白。
本文介绍如何利用 css 滚动驱动动画（scroll-driven animations），在用户滚动至页面底部时，只为固定定位的 cookie 提示栏动态添加 margin-bottom，避免初始渲染时就出现多余空白。
在构建网页 Cookie 同意提示栏时，常采用 position: fixed; bottom: 0 实现始终吸附于视口底部的效果。但这种布局会在页面内容抵达底部时与 Cookie 栏重叠——尤其当用户滚动到底部、希望看到完整内容末尾时，缺乏底部留白会降低可读性与用户体验。
理想方案是：仅当页面滚动到接近底部时，才为 Cookie 栏动态增加 margin-bottom: 50px；初始状态下保持紧贴视口底边，不占用额外空间。传统 JavaScript 监听 scroll 事件虽可行，但存在性能开销与重绘延迟问题。现代 CSS 提供了更优雅、声明式且高性能的解法：滚动驱动动画（Scroll-Driven Animations）。
该方案核心在于将动画触发时机与滚动位置绑定，无需 JS 干预。以下为完整实现：
#cookie-section {
min-height: 50px;
width: 100%;
position: fixed;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(38, 38, 38, 0.9);
color: #fff;
padding: 0 20px;
/* 使用 inset 替代 top/right/bottom/left 单独设置（更语义化） */
inset: auto 0 0 auto;
/* 滚动驱动动画配置 */
animation: add-margin 1s forwards;
animation-timeline: scroll(root); /* 绑定到根滚动容器（即 viewport） */
animation-range-start: 90%; /* 动画在滚动进度达 90% 时开始 */
animation-range-end: 100%; /* 在 100% 时完成（即触底） */
}
@keyframes add-margin {
from { margin-bottom: 0; }
to { margin-bottom: 50px; }
}
/* 确保页面有足够高度以触发滚动（仅用于演示） */
body {
min-height: 300vh;
margin: 0;
}
<section id="cookie-section"><span id="cookie-text">我们使用 Cookie 来提升您的浏览体验</span> </section>
✅ 关键要点说明：
- animation-timeline: scroll(root) 表示动画时间轴由整个页面的垂直滚动决定；
- animation-range-start: 90% 意味着当滚动位置达到页面总高度的 90% 时，动画启动；end: 100% 保证在完全触底时 margin-bottom 达到 50px；
- forwards 使动画结束后样式保持在 to 状态，确保触底后边距持续生效；
- 使用 inset 而非 bottom: 0 是更现代、语义清晰的写法（兼容性同 bottom，推荐使用）；
- ⚠️ 注意浏览器支持：目前仅 Chromium 内核浏览器（Chrome 115+、Edge 115+、Opera 101+）原生支持滚动驱动动画；Firefox 和 Safari 尚未实现。生产环境需搭配 @supports 特性检测或降级方案（如 IntersectionObserver + JS）：
@supports not (animation-timeline: scroll(root)) {
#cookie-section {
margin-bottom: 50px; /* 保守降级：始终显示边距，或通过 JS 动态控制 */
}
}
总结：滚动驱动动画为“条件式布局响应”提供了纯 CSS 的高性能解决方案。尽管当前兼容性有限，但它代表了 Web 布局演进的重要方向。在支持环境中，它能显著减少 JS 介入、提升渲染性能，并让 Cookie 栏行为更自然、更符合用户预期。
