CSS 滚动驱动动画：用 scroll() 和 view() 替代 JS 监听滚动

超哥前端记录

发布于 2026-11-14 10:04:55

概述

页面滚动时触发动画是很常见的设计需求，比如导航栏在滚动后收缩、图片进入视口淡入、进度条随滚动增长。过去这类效果基本靠 scroll 事件配合 getBoundingClientRect() 计算位置，再手动改样式或类名。这种做法的问题是触发频率高，回调里做布局读取容易引起强制重排，滚动一快就掉帧；同时滚动位置和动画状态是两套独立更新的值，容易出现视觉延迟和抖动。CSS 滚动驱动动画（scroll-

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

CSS 滚动驱动动画：用 scroll() 和 view() 替代 JS 监听滚动

CSS 滚动驱动动画：用 scroll() 和 view() 替代 JS 监听滚动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐