SCROLL · 滚动查看
参数调改
PLAYGROUND
面板宽度--panel_w
4080
面板间距--panel_gap
864
序号主色--accent
序号辅色--accent2
底色--base
实现要点
NOTES- 01
结构三件套:外层 wrap(JS 量出轨道超宽并把高度撑成 100vh + 位移量)、sticky 舞台(100vh)、位移轨道——垂直滚动被按 1:1 兑换成轨道的 translate3d 横移。
- 02
标题标签钉在舞台顶部(上下各留 20px 呼吸),面板在剩余空间 align-items:center 垂直居中:页面没有前置 intro 与尾段 outro,从第一帧到最后一帧都是同一屏构图,任意滚动位置截屏标题完整、面板上下不被裁(左右裁切是横向滚动的语义)。
- 03
位移量必须实测(track.scrollWidth − 舞台宽),不要用 vw 估算:面板宽、间距都是参数,估算会在末端留空或截掉最后一块。
- 04
transform-only + sticky 全在合成器路径,滚动全程 60fps;resize 时重算高度并回填当前进度,避免错位。
- 05
进度映射严格线性、由滚动位置驱动(reduced-motion 下保留跟随用户滚动,仅关闭预览自动滚动)。
- 06
可选叠加 scroll-snap: y proximity 让面板停位更优雅;本 demo 未加,保持纯净位移手感。
源代码
SOURCE
加载源代码…