40. 📜 滚动驱动动效 Scroll-driven Design ★★★★☆
🌏 Web 网页规范
- CSS `@supports (animation-timeline: scroll())` 方案
- 背景图片层差视差 (Parallax) 位移映射
- 页面滑入揭示 (Scroll Reveal) 交叉视口检测
📱 App 移动端规范
- APP 列表滚动时顶部导航栏折叠收缩
- 边缘吸顶滚动列表组头粘性定位 (Sticky Header)
- 列表过卷下拉弹性拉伸物理回弹与刷新动作触发
Web 端现代浏览器支持原生 CSS `scroll()` 接口，无需 JS 即可绑定滚动进度与动画帧。常见的有图片视差位移、页面滚动到特定可视区时由透明平滑滑入显现的机制。
App 原生端在列表向下滚动时，顶部导航栏会平滑变小或隐退（如 iOS 大标题导航栏折叠）；段落分组标签会以粘性吸附在顶部；在过卷 (Overscroll) 时，提供物理弹性拉伸阻尼手势反馈。
注意上方的导航标题栏——当你向下滚动时，它会吸附在容器顶部（position: sticky），始终可见。这是 iOS 大标题导航栏和通讯录分组标签的核心模式。
现代 Web 使用 IntersectionObserver 检测元素进入视口的时机，触发淡入、滑入或缩放动画。每个色块代表一个"揭示区域"。
顶部的渐变进度条实时反映滚动百分比（0% → 100%）。在长文章、表单分步填写、阅读进度等场景中极为常见。计算公式：scrollTop / (scrollHeight - clientHeight) * 100
iOS 和 macOS 的弹性过卷效果——滚动到顶部/底部时内容继续被拉伸，松手后弹簧回弹。Android 显示边缘发光效果。此物理反馈让界面感觉"有生命力"。
最新的 CSS 规范支持 animation-timeline: scroll()，无需 JavaScript 即可将动画帧绑定到滚动进度，实现纯 CSS 视差、渐显、缩放等效果。
通过 scroll-snap-type: y mandatory 让滚动停止时自动吸附到指定锚点，常用于轮播图、分页故事、App 启动引导页。
社交媒体瀑布流（微博、抖音、Twitter）的核心模式——监听滚动到底部事件，动态请求并追加下一页内容。需配合骨架屏加载和滚动位置恢复避免体验断层。
移动端特有手势——在顶部继续向下拉，触发刷新动画。阈值为 60-80px，低于阈值松手则回弹取消。需用 touchmove 监听并阻止默认滚动。
App 端常用横向卡片轮播展示推荐内容（Netflix、App Store、小红书）。通过 overflow-x: auto; scroll-snap-type: x mandatory 实现滑动吸附。
← 左右拖动试试 →
电商详情页底部的"立即购买"按钮、文章底部的"订阅"按钮——始终悬浮在视口底部，不随内容滚动消失，是提升转化率的关键模式。
顶部导航栏在页面顶部时透明，滚动后渐变为实色——Apple 官网、Airbnb 等大量采用此模式。通过监听 scrollTop 阈值切换 CSS 类或修改 opacity 实现。