MOTION HUB

横向滚动带

Horizontal Scroll
#horizontal-scroll · 24/72
SCROLL · 滚动查看

参数调改

PLAYGROUND
面板宽度--panel_w
4080
vw
面板间距--panel_gap
864
px
序号主色--accent
序号辅色--accent2
底色--base

实现要点

NOTES
  1. 01

    结构三件套:外层 wrap(JS 量出轨道超宽并把高度撑成 100vh + 位移量)、sticky 舞台(100vh)、位移轨道——垂直滚动被按 1:1 兑换成轨道的 translate3d 横移。

  2. 02

    标题标签钉在舞台顶部(上下各留 20px 呼吸),面板在剩余空间 align-items:center 垂直居中:页面没有前置 intro 与尾段 outro,从第一帧到最后一帧都是同一屏构图,任意滚动位置截屏标题完整、面板上下不被裁(左右裁切是横向滚动的语义)。

  3. 03

    位移量必须实测(track.scrollWidth − 舞台宽),不要用 vw 估算:面板宽、间距都是参数,估算会在末端留空或截掉最后一块。

  4. 04

    transform-only + sticky 全在合成器路径,滚动全程 60fps;resize 时重算高度并回填当前进度,避免错位。

  5. 05

    进度映射严格线性、由滚动位置驱动(reduced-motion 下保留跟随用户滚动,仅关闭预览自动滚动)。

  6. 06

    可选叠加 scroll-snap: y proximity 让面板停位更优雅;本 demo 未加,保持纯净位移手感。

源代码

SOURCE

加载源代码…