别称 Headroom, Auto-hide Navbar, Reveal on Scroll Up, Scroll Direction Detection, Scroll Direction Animation
向下滚动时头部隐藏，向上滚动时重新出现。
适用场景
移动端和长页面的导航栏
在[应用位置]添加“滚动隐藏头部”(Hide on Scroll Header)，也叫 headroom 或自动隐藏导航栏(auto-hide navbar)。
用户向下滚动时，头部要向上滑出视野；只要向上滚动，就滑回来：快速、流畅，根据滚动方向而不是距离来反应。
在页面最顶部时始终显示，忽略细微的滚动抖动，并且当头部内有元素获得键盘焦点时保持显示。别称 Horizontal Scrolling, Scroll-jacked Horizontal Gallery
纵向滚动时，一排被固定的面板横向移动。
适用场景
图库、作品集、时间线
在[应用位置]添加“横向滚动区块”(Horizontal Scroll Section)，也叫 horizontal scrolling 或 scroll-jacked horizontal gallery。
区块到达顶部时要固定住，向下滚动时让其中的一排面板横向移动，最后一个面板出现后再解除固定。
横向移动要直接跟随滚动位置，往回滚动时反向移动；在小屏幕上，或者如果用户开启了“减少动态效果”(prefers-reduced-motion)，就改为可以正常滑动的横排。别称 Parallax Scrolling, Parallax Layers, Parallax scroll, Depth parallax, Parallax hero
滚动时各图层以不同速度移动，营造出纵深感。
适用场景
首屏背景、落地页
在[应用位置]添加“视差滚动”(Parallax)效果，也叫 parallax scrolling 或视差图层(parallax layers)。
页面滚动时，背景图层要比内容移动得慢，越远的图层移动越少，营造含蓄的纵深感。
让效果紧跟滚动位置、没有延迟，文字放在正常速度的图层上；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭这个效果。别称 Pinned Section, Sticky Section, Scroll Pin
在一段滚动范围内，元素固定在原位，其他内容或动画继续推进。
适用场景
滚动驱动的叙事、功能展示
在[应用位置]添加“滚动固定”(Pinning)效果，也叫固定区块(pinned section)或 sticky section。
旁边的内容随滚动经过时，一个面板要固定在原位，并随正在阅读的步骤切换内容，区块结束时再解除固定。
优先使用原生的 sticky 定位，而不是劫持滚动；并确保在小屏幕上即使没有固定面板，每个步骤也依然易读。别称 Reading Progress Bar, Progress Bar
随着用户滚动页面或文章，进度条或圆环逐渐填满。
适用场景
文章、长页面
在[应用位置]添加“滚动进度条”(Scroll Progress Indicator)，也叫阅读进度条(reading progress bar)。
顶部的一条细条要随着读者滚动的距离从左向右填充，到末尾时铺满整个宽度。
直接绑定滚动位置，不要有缓动延迟，也不要遮挡内容。别称 Scroll Snapping, Snap Scrolling
滚动停止时会吸附到预设的位置，例如幻灯片或区块。
适用场景
轮播、整屏区块、图库
在[应用位置]添加“滚动吸附”(Scroll Snap)，也叫 scroll snapping 或 snap scrolling。
滚动停下时，视图要干净利落地吸附到最近的区块，让每个区块都对齐边缘，而不是停在半中间。
使用浏览器原生的吸附功能，让滚轮、触摸和键盘滚动都照常可用，并确保比视口更高的内容也能完整阅读。别称 Scroll-Driven Animation, Scroll Scrub, Scroll Timeline Animation, Scrub, Scroll Scrubbing, Scroll Progress Timeline, scroll() timeline, View Progress Timeline, view() timeline, Element Visibility Animation
动画进度直接绑定滚动位置，向前滚动时播放，向回滚动时倒放。
适用场景
叙事型页面、进度效果
在[应用位置]添加“滚动驱动动画”(Scroll-Linked Animation)，也叫 scroll-driven animation 或滚动擦洗(scroll scrub)。
动画要严格跟随滚动位置：向下滚动时正向播放，向上滚动时当场倒放，自身不带基于时间的缓动。
把整段动画映射到一个明确的滚动区间；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就显示一个合理的静态状态。别称 Reveal on Scroll, Scroll Reveal, Animate on Scroll, Scroll Fade-In, Toggle Class on Scroll, Scroll Toggle Actions
元素进入或离开视口时，动画播放一次。
适用场景
淡入区块、延迟显现
在[应用位置]添加“滚动触发动画”(Scroll-Triggered Animation)，也叫滚动显现(reveal on scroll)或 animate on scroll。
每个元素进入视口时只播放一次：淡入并向上滑到位，按自己快速顺滑的节奏播放，而不是跟随滚动位置。
脚本加载失败时内容也要可见；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接显示元素。别称 Smooth Scrolling, Inertia Scroll
滚动和锚点跳转带缓动地平滑滑动，而不是生硬地跳动。
适用场景
锚点导航、追求高级质感的页面
在[应用位置]添加“平滑滚动”(Smooth Scroll)，也叫 smooth scrolling 或惯性滚动(inertia scroll)。
滚动和锚点跳转要顺滑地滑动并缓缓停下，而不是一顿一顿地跳动；手感要轻快灵敏，不要沉重拖沓。
保留键盘滚动、滚动条、页内查找等原生行为；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就关闭平滑效果。别称 Sticky Stacking Cards, Card Stack Scroll
滚动时卡片吸附在顶部并层层叠放，先前的卡片通常会略微缩小。
适用场景
功能列表、作品集
在[应用位置]添加“滚动堆叠卡片”(Stacking Cards)，也叫 sticky stacking cards 或 card stack scroll。
滚动时，每张卡片吸附在顶部附近，下一张卡片从下方滑上来盖住它，下面的卡片略微缩小，叠成整齐的一摞。
让每张先前的卡片露出一道细边，并给最后一张卡片留足空间，让它在区块结束前滑到位。别称 Shrinking Header, Shrink on Scroll
用户向下滚动后，吸顶头部的高度或尺寸会缩小。
适用场景
导航栏
在[应用位置]添加“吸顶头部收缩”(Sticky Header Shrink)，也叫 shrinking header 或 shrink on scroll。
头部固定在顶部，读者稍微向下滚动后，平滑地收缩成更窄的条、Logo 也变小；回到顶部时再恢复原样。
头部尺寸变化时，不要让下方内容跳动。别称 Scroll Text Marquee, Text Scroll, Scroll Velocity Text, Scroll Based Velocity
页面纵向滚动时，大号文字行横向滑动。
适用场景
品牌标语、首屏区块
在[应用位置]添加“滚动文字跑马灯”(Text Marquee on Scroll)，也叫 scroll text marquee 或 scroll velocity text。
页面向下滚动时，大号文字行横向滑动，相邻行朝相反方向移动；向上滚动时再滑回来。
让移动绑定滚动位置，不要让长文字行产生横向滚动条；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就保持静止。别称 Scroll Zoom, Scale on Scroll, Spatial Scroll Zoom
随着用户滚动，元素或场景放大或缩小。
适用场景
首屏开场、图片放大展开
在[应用位置]添加“滚动缩放”(Zoom on Scroll)效果，也叫 scroll zoom 或 scale on scroll。
区块停留在视口中时，元素要随着滚动从一张小卡片平滑放大，直到铺满整个视口；向上滚动时再缩回去。
缩放时不要挤动周围的布局；如果用户开启了“减少动态效果”(prefers-reduced-motion)，就直接以最终尺寸显示，不做缩放。