scroll-driven-filter 并不存在于 css 标准中，截至 2026 年 5 月仍不可用；需通过 javascript 监听滚动、计算比例、动态更新 css 自定义属性 --blur，再由 backdrop-filter 或 filter 消费该变量，并配合 will-change 和 requestanimationframe 实现高性能滚动模糊效果。
scroll-driven-filter 还没进标准，目前无法直接用。想让背景模糊度随滚动变化，得靠 JavaScript 驱动 backdrop-filter 或 filter 的值，再配合 CSS 自定义属性和 transform 性能优化。
为什么不能直接用 scroll-driven-filter
截至 2026 年 5 月，scroll-driven-animations（SDA）已落地，但 scroll-driven-filter 并不存在——CSS 标准里压根没有这个属性。你搜到的多数“教程”其实是把 @keyframes + animation-timeline: scroll() 错误套用到 filter 上，而 filter 不在 SDA 支持的可动画属性列表中（Chrome Canary 126+ 仍报 Invalid property）。
真正能滚动驱动的滤镜参数，只有通过 JS 读取 scrollY 或 IntersectionObserver，再写入 style.setProperty('--blur', value)，由 CSS 变量承接。
用 CSS 变量 + requestAnimationFrame 实现滚动模糊渐变
核心思路：监听滚动，把当前滚动比例映射为 blur() 值，注入自定义属性，再让目标元素用 backdrop-filter: blur(var(--blur)); 消费。
- 给需要模糊的容器加
data-scroll-blur属性，方便 JS 精准绑定 - 在 CSS 中定义变量默认值：
:root { --blur: 0px; }，并在目标元素上写backdrop-filter: blur(var(--blur)); transition: backdrop-filter 0.2s linear; - JS 里用
requestAnimationFrame而非scroll事件直读，避免卡顿；用window.scrollY / (document.body.scrollHeight - window.innerHeight)算出归一化滚动比（0–1） - 把滚动比乘以最大模糊值（比如 12），再拼成
px单位赋给--blur
示例片段：
const el = document.querySelector('[data-scroll-blur]');
let ticking = false;
<p>function updateBlur() {
const scrollRatio = window.scrollY / (document.body.scrollHeight - window.innerHeight);
const blurVal = Math.min(12, scrollRatio * 12); // 最大 12px
document.documentElement.style.setProperty('--blur', <code>${blurVal}px</code>);
ticking = false;
}</p><p>window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(updateBlur);
ticking = true;
}
});</p>
backdrop-filter 滚动模糊的兼容与性能雷区
滚动中频繁改 backdrop-filter 容易触发重绘抖动，尤其在 Safari 和低端 Android 上。几个必须做的动作：
- 给应用
backdrop-filter的元素加will-change: filter，否则 Safari 17+ 会跳帧 - 确保该元素有半透明背景，比如
background: rgba(255, 255, 255, 0.15)，纯色或不透明就看不到背后模糊了 - 父容器必须有可见背景（如
body { background-image: url(...); }），backdrop-filter模糊的是它背后的层，不是自己 - 别在
position: sticky或overflow: auto容器里做滚动模糊——这些容器会截断 backdrop 渲染链，导致模糊失效
替代方案：只对伪元素做 filter + scrollY 映射
如果 backdrop-filter 兼容性要求高（比如要支持 Firefox 102 以下），可用老办法：用 ::before 承载背景图，再对其应用 filter: blur()。但注意：
- 伪元素必须设
position: fixed或position: absolute+inset: 0，否则滚动时会错位 - 模糊值同样靠 JS 更新，但写法是
el.style.filter = `blur(${blurVal}px)`，不能走 CSS 变量 - 必须加
will-change: filter到伪元素本身（通过el::before { will-change: filter; }），否则动画生硬 - 这种方案本质是“假背景”，当页面内容高度动态变化时，伪元素尺寸容易跟不上，需额外监听
resize和 DOM 变化
滚动模糊不是开个 blur() 就完事的事——真正难的是让模糊值稳、准、不闪、不卡，且在各种滚动上下文中都保持视觉连贯。变量 + RAF + will-change 是目前最可控的组合，其余都是妥协路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
