本文介绍如何在用户滚动至页面底部时，为固定在视口底部的 cookie 提示栏动态添加 margin-bottom，避免遮挡内容，同时保持初始状态无额外间距。方案基于现代 css 滚动驱动动画（scroll-driven animations），适用于支持该特性的浏览器（如 chrome 115+）。
本文介绍如何在用户滚动至页面底部时，为固定在视口底部的 cookie 提示栏动态添加 margin-bottom，避免遮挡内容，同时保持初始状态无额外间距。方案基于现代 css 滚动驱动动画（scroll-driven animations），适用于支持该特性的浏览器（如 chrome 115+）。
要实现“仅在滚动到底部时才显示底部外边距”的效果，关键在于脱离静态样式思维，转而利用滚动位置触发动态样式变化。直接设置 margin-bottom: 50px 会使元素始终下移，破坏其紧贴视口底部的原始定位；而 JavaScript 监听 scroll 事件虽可行，但存在性能开销与重绘延迟问题。更优雅、声明式的解法是采用 CSS 滚动驱动动画（Scroll-Driven Animations）。
该方案通过 animation-timeline: scroll() 将动画绑定到页面滚动进度，并用 animation-range-start 精确控制动画触发时机。例如，设为 90% 表示当滚动高度达到文档总可滚动高度的 90% 时开始执行动画——即接近底部时渐进增加外边距。
以下是完整可运行示例：
body {
min-height: 300vh; /* 确保页面可滚动，便于测试 */
}
#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;
box-sizing: border-box;
/* 使用滚动驱动动画替代 JS */
animation: addMargin 1s forwards;
animation-timeline: scroll(root);
animation-range-start: 90%; /* 在滚动至最后 10% 时启动 */
}
@keyframes addMargin {
from { margin-bottom: 0; }
to { margin-bottom: 50px; }
}
<section id="cookie-section"><span id="cookie-text">Bla bla bla — 您已到达页面底部</span> </section>
✅ 注意事项与兼容性说明：
- ✅ 当前仅 Chrome 115+、Edge 115+ 及部分 Safari 技术预览版原生支持 scroll() 时间轴；Firefox 尚未实现。生产环境使用前请务必通过 @supports 特性查询降级：
@supports (animation-timeline: scroll()) { /* 启用滚动驱动动画 */ } - ⚠️ inset: auto 0 0（原文中写法）并非必需，且可能引起兼容性歧义；推荐显式使用 bottom: 0; left: 0; right: 0; 保证定位健壮性。
- ? 动画默认为“进入即播放一次”，若需随滚动反复响应（如滚动回退时恢复间距），可配合 animation-range-end: 100% 与 animation-fill-mode: forwards 精细调控。
? 总结：滚动驱动动画让“位置感知样式”成为纯 CSS 能力，既提升性能又简化逻辑。对于 Cookie 栏、悬浮按钮等需响应滚动终点的 UI 元素，它是比 IntersectionObserver 或 scroll 事件监听更轻量、更声明式的现代方案——前提是目标浏览器支持。在不支持的环境中，建议优雅降级为始终保留 50px 底部留白，或引入轻量 JS 回退逻辑。
