当前位置：首页 > 文章列表 > 文章 > 前端 > 滚动触发背景模糊，CSS实现动态模糊效果

滚动触发背景模糊，CSS实现动态模糊效果

2026-05-25 12:32:14 0浏览收藏

为什么不能直接用 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;
function updateBlur() {
const scrollRatio = window.scrollY / (document.body.scrollHeight - window.innerHeight);
const blurVal = Math.min(12, scrollRatio * 12); // 最大 12px
document.documentElement.style.setProperty('--blur', ${blurVal}px);
ticking = false;
}
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(updateBlur);
ticking = true;
}
});

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 是目前最可控的组合，其余都是妥协路径。

本篇关于《滚动触发背景模糊，CSS实现动态模糊效果》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！