本文介绍如何利用 CSS 滚动驱动动画（Scroll-Driven Animations），在用户滚动至页面底部时，仅为固定定位的 Cookie 提示栏动态添加 margin-bottom，避免初始状态就出现多余空白。
本文介绍如何利用 css 滚动驱动动画（scroll-driven animations），在用户滚动至页面底部时，仅为固定定位的 cookie 提示栏动态添加 `margin-bottom`，避免初始状态就出现多余空白。
在构建现代 Web 应用时，常需将 Cookie 同意横幅（cookie banner）以 position: fixed; bottom: 0 方式始终锚定于视口底部。但若页面内容较短，该横幅会紧贴页面最底端，导致用户无法滚动查看其下方可能存在的页脚内容；而当页面足够长、用户滚动到底部时，又需要为其“腾出空间”——即动态增加底部外边距（如 margin-bottom: 50px），使页脚可见且不被遮挡。
传统 JavaScript 监听 scroll 事件虽可实现，但存在性能开销与重绘抖动风险。更优雅、声明式的方案是使用 CSS 滚动驱动动画（Scroll-Driven Animations），它允许动画进度直接绑定到滚动位置，无需 JS 干预。
以下为完整实现（需 Chrome 115+ 或支持 animation-timeline 的浏览器）：
#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;
/* 使用滚动驱动动画控制 margin-bottom */
animation: addMargin 1s forwards;
animation-timeline: scroll(root);
animation-range-start: 90%; /* 动画在滚动至页面底部前10%处开始 */
animation-range-end: 100%; /* 在完全抵达底部时完成 */
}
@keyframes addMargin {
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) 表示动画时间轴基于整个文档的滚动进度（即 document.scrollingElement）；
- animation-range-start: 90% 意味着当滚动进度达 90%（即剩余 10% 高度未滚动）时，动画开始执行；
- forwards 保证动画结束后样式保持在 to 状态（即 margin-bottom: 50px 持久生效）；
- 使用 inset 替代 top/right/bottom/left 是现代写法（如 inset: auto 0 0 等价于 top: auto; right: 0; bottom: 0; left: 0），语义更清晰。
⚠️ 注意事项：
- 当前滚动驱动动画仍属实验性特性，Firefox 和 Safari 尚未支持，生产环境建议配合 @supports 特性检测或降级为 JS 方案（如监听 scroll + getBoundingClientRect() 判断是否触底）；
- 若需兼容旧浏览器，可采用轻量级 JS 实现：
const cookieBar = document.getElementById('cookie-section'); window.addEventListener('scroll', () => { const isAtBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight - 10; cookieBar.style.marginBottom = isAtBottom ? '50px' : '0'; });
通过滚动驱动动画，我们以纯 CSS 实现了响应式、高性能的底部留白逻辑，既提升了用户体验，也体现了现代 CSS 的表达力与潜力。
