.refresh

细节​

强制 ScrollTrigger 实例重新计算其start和end值（它将被激活的滚动位置）。

时间轴（Timeline）是独特的，因为当你使用 ScrollTrigger 创建一个时间轴时，尚未添加任何动画（这些动画可能会影响开始/结束位置），所以 ScrollTrigger 会在调用 refresh 方法之前等待一个 tick（时钟周期）。refresh()它无法自动知道你何时向时间轴中添加了最后一个动画，因此需要这个一个 tick 的延迟。

然而，如果该时间轴的 ScrollTrigger 使用了 pin 固定效果，那么它可能会影响页面下方的所有 ScrollTrigger。例如，如果它固定了一个元素 500px（假设 scrollBehavior 不是pinSpacingautofalse，则后面所有的 ScrollTrigger 都需要将其start/end值增加 500px。如果你接着创建了一个不在时间轴中的 ScrollTrigger，它的start/end值将会立即被计算（在前面的时间轴 ScrollTrigger 调用 refresh 之前，由于存在一个 tick 的延迟），因此不会考虑 pin 固定偏移量。

可以通过以下两种方式之一轻松解决这个问题：在你完成向时间轴中添加所有动画之后（并且在你创建页面下方的其他 ScrollTrigger 之前），手动调用refresh()refresh 方法，在创建页面下方的其他 ScrollTrigger 之前），或者在你完成所有创建操作后直接调用静态ScrollTrigger.refresh()refresh 方法。

你可以通过动画实例的scrollTriggerscrollTrigger 属性获取与其关联的 ScrollTrigger 实例：

// create a timeline with a ScrollTrigger
const tl = gsap.timeline({ scrollTrigger: {...}});

// after adding all animations to that timeline, we can manually force it to calculate its start/end (on just that instance):
tl.scrollTrigger.refresh();

// or cause ALL ScrollTrigger instances to refresh using the static method:
ScrollTrigger.refresh();