不能。animation-timeline: scroll(root) 仅控制动画起止时机，不输出滚动百分比，无法实时映射 width 或 scalex；view() 面向单元素视口进出，与页面总滚动无关；纯 css 全局进度条目前不可行，需 js 计算同步。
animation-timeline: scroll(root) 能不能直接做全局进度条
不能。虽然 CSS 新增了 animation-timeline: scroll(root)，但它不输出可读取的滚动百分比值，也不能把“当前滚动位置”映射为某个元素的 width 或 transform: scaleX()。它只控制动画播放的起止时机（比如从滚动开始播到滚动结束），不是实时、可逆、可同步的数值驱动。
你写 @keyframes progress { from { width: 0% } to { width: 100% } }，动画只会“一次性播完”，不会随用户拖动滚动条实时伸缩；而且多个元素共用 scroll(root) 时，各自动画起止点取决于它们在 DOM 中的位置，不是统一按文档总高算的 0%→100%。
为什么 view() 时间线也不行
animation-timeline: view() 是为单个元素进出视口设计的，它的 0% 是元素上边缘刚进视口顶部，100% 是下边缘刚出视口底部——和整个页面的滚动比例毫无关系。有人试图给 加 view() 并配 animation-range: entry 0% cover 100%，结果是：进度条只在首屏区域“闪一下”，根本覆盖不了整页滚动过程。
- 它不感知
documentElement.scrollTop - 无法绑定到固定定位的顶部横条
- 移动端 Safari 对
view()支持不稳定，容易跳帧或不触发
真正能用纯 CSS 实现的“近似方案”
目前唯一被 Chromium（Chrome/Edge）和 Safari 技术预览版支持、且效果接近的写法，是用 scroll() + scroll-timeline + scaleX() 组合，但前提是：进度条必须是某个**有明确滚动范围的容器子元素**，且该容器需设 overflow: auto —— 这意味着它只能用于局部滚动区（如卡片列表、侧边栏），不能用于 document.scrollingElement 全局场景。
示例（仅适用于自定义滚动容器）：
.scroll-container {
overflow-y: auto;
scroll-timeline: --scroll-tl y;
}
<p>@scroll-timeline --scroll-tl {
source: selector(.scroll-container);
orientation: vertical;
start: 0%;
end: 100%;
}</p><p>.progress-bar-inner {
transform: scaleX(0);
transform-origin: left;
animation: fill-progress 1s linear forwards;
animation-timeline: --scroll-tl;
}</p><p>@keyframes fill-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}</p>
注意：scroll-timeline 是独立于 animation-timeline 的新语法，需配合 @scroll-timeline 规则定义时间线，且目前仅 Chromium 系列稳定支持；Safari 仍处于实验阶段，Firefox 完全未实现。
别踩的坑：伪“纯 CSS”方案常见失效点
很多教程说“两行 CSS 搞定滚动进度条”，贴出的代码看似简洁，实则隐含严重兼容性和逻辑缺陷：
- 用
body或html作为scroll()绑定目标，在 Safari 和部分安卓 WebView 中会静默失败 - 漏掉
scroll-padding-top或scroll-margin-top，导致进度计算起点偏移（尤其有 sticky header 时） - 没处理
scrollHeight - clientHeight === 0的边界情况（空页或内容不足一屏），直接除零报错 - 把
progress元素放在内但没设z-index，结果被第三方 UI 库的 modal 或 header 盖住 - 依赖
window.innerHeight计算，却没监听resize，iOS Safari 地址栏显隐会导致进度条突然跳变
所谓“纯 CSS 实现”，目前只在受控环境（如内部管理后台、Chromium-only PWA）中勉强可用；真实项目里，只要求兼容主流浏览器，就必须用 JS 计算 scrollTop / (scrollHeight - clientHeight) 同步到 style.setProperty('--scroll-progress', ...)，再由 CSS 读取变量驱动样式——这不是妥协，是现阶段的事实标准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
