← 返回全部术语
滚动触发与定位 / TERM 004
004阅读进度条Scroll Progress
细线随着阅读向前推进。
LIVE PREVIEW
文章阅读进度
✦ MOTIONLEX0% → 100%
01 这个效果是什么
把阅读进度映射到一条连续的视觉轨道,让长内容中的位置感更明确。
02 可以这样告诉 AI
在文章顶部添加一条 2px 的阅读进度条,进度按文章内容容器的已阅读比例计算,从 0% 平滑更新到 100%。不要按整站滚动高度计算;窗口尺寸变化时也要重新计算,并避免频繁更新造成卡顿。
03 做好后看什么
- 文章起点为 0%,末尾为 100%
- 窗口尺寸改变后进度正确
- 滚动顺畅且不影响原布局