滚动有两种时钟
理解“出现后播放”和“随滚动推进”的区别。
互动实验在真实界面中看
正在准备互动实验…
02 — COMPARE / 看见方法的作用
同一个任务，换一种处理方式。
先看两种实现，再找出让交互更清楚的那条规则。
未使用 Skills · 基础实现基础版本
正在准备互动实验…
用文字说明当前位置和是否触发。
使用 Skills · 应用交互规则规则应用
正在准备互动实验…
保留文字，同时增加对应的进度和短反馈。
01 / 改了什么
视觉变化映射真实滚动状态。
02 / 为什么这样改
触发条件与推进时钟是两件事。
03 / 什么时候不需要
不劫持滚轮、不强制吸附，也不让装饰性视差影响阅读。
教学示意，非 AI 生成实测。两侧的任务、内容和输入条件一致；只比较这里说明的规则。Skills 不保证每次生成相同结果。
03 — APPLY / 放进真实项目
触发条件与推进时钟是两件事。
01滚动触发：进入观察区域后由时间推进一次短反馈。
02滚动驱动：进度直接来自滚动距离，停下来就停止。
03正文默认可见，JavaScript 或动画失效也不会读不到内容。
适合用在阅读进度分段解释有目的的低频出现反馈
把这段需求，交给你的 AI
在可滚动内容中对比时间触发与滚动进度。正文始终可见；滚动进度来自实际 scrollTop，触发反馈只运行一次并可重置。减少动态效果时保留文字与进度数字。
实现代码与机制 ＋
以下片段解释核心机制，需要与状态、语义和清理逻辑一起使用。页面演示由本地受控组件实现。
const max = element.scrollHeight - element.clientHeight;
const progress = max > 0 ? element.scrollTop / max : 0;
// 时间触发与滚动驱动使用不同状态，不混用同一计时器。原理、来源与适用边界 ＋
不劫持滚轮、不强制吸附，也不让装饰性视差影响阅读。
减少动态效果时去掉装饰位移、回弹和自动连续播放，保留功能、状态文字与手动查看步骤。
阅读对应的中文方法笔记 ↗本案例是独立教学实现。前后对比说明具体规则，不是对某个模型的效果承诺。