走马灯
View- 你身边的那位 代替了我的座位
- 他的手捧着玫瑰 承诺余生都奉陪
- 而我始终学不会
- 已被风吹散的眼泪
- 那逝去的幸福该怎么追回
Scroll0%
海到无边天作岸
会当凌绝顶
山高绝顶我为峰
一览众山小
scrollTrigger: { pin: true, scrub: true }Library
案例
走马灯
View骨架屏
View滚动控制
View01进度条在补什么
滚动条常常被样式藏起来，读者失去了「还剩多少」的参照。进度条把不可见的滚动位置翻译成一条看得懂的线，让人知道自己站在哪儿。
02useScroll 的两种来源
不传参数时它读整个页面的滚动；传入 container 之后，进度只属于这个可滚动元素，外面的页面滚不滚都与它无关。
03scrollYProgress 是什么
一个从 0 到 1 的 MotionValue。0 是还没开始，1 是已经到底。它在动画帧里更新，不会触发 React 重渲染，所以滚得再快也不掉帧。
04为什么要套一层 spring
原始进度和滚轮是一比一的，手一停它就停。用 useSpring 包一层，进度条会带着惯性追上来，顺带把触控板的细碎抖动也抹平了。
05用 scaleX 而不是改宽度
缩放走的是 GPU 合成层，不触发布局回流；宽度不行。再配上 origin-left，条子才是从左边长出来，而不是从中间往两头撑。
06stiffness 与 damping
stiffness 决定追得多急，damping 决定停得多稳。200 / 40 是一组克制的取值：跟手，但停下时不会来回晃。
07它是氛围，不是导航
进度条只回答「还有多远」，回答不了「我要去哪儿」。需要跳转的长文，该给目录还是得给目录。
08最容易踩的坑
container 指向的元素必须自己能滚：既要 overflow-y-auto，也要有确定的高度。少给高度，scrollYProgress 会一直停在 0。
幻灯片缩放
ViewNote01 / 08
课件
