← 返回全部术语
滚动触发与定位 / TERM 004

阅读进度条Scroll Progress

细线随着阅读向前推进。

004
LIVE PREVIEW
文章阅读进度
0% → 100%
✦   MOTIONLEX

01 这个效果是什么

把阅读进度映射到一条连续的视觉轨道,让长内容中的位置感更明确。

02 可以这样告诉 AI

在文章顶部添加一条 2px 的阅读进度条,进度按文章内容容器的已阅读比例计算,从 0% 平滑更新到 100%。不要按整站滚动高度计算;窗口尺寸变化时也要重新计算,并避免频繁更新造成卡顿。

03 做好后看什么

  • 文章起点为 0%,末尾为 100%
  • 窗口尺寸改变后进度正确
  • 滚动顺畅且不影响原布局