ScrollTrigger.refresh

细节​

重新计算页面上所有 ScrollTrigger 的位置，这种情况通常在窗口/滚动条调整大小时发生。自动发生但你可以通过调用ScrollTrigger.refresh()来强制执行。例如，如果你对 DOM 做出了某些更改，这些更改会导致重排和位置变动，比如展开内容。

要在启动刷新之前等待至少一个 requestAnimationFrame 的 tick，并最多等待约 200 毫秒，只需传入true给safe参数。这很有用，因为有时浏览器并不会立即实际渲染与 DOM 相关的变化，导致测量不准确。例如，如果你给某个元素添加了一个“click”事件监听器，该元素会扩展页面上的其他内容，并且你在该回调中调用了ScrollTrigger.refresh()，此时变化可能尚未完全渲染，因此这是启用此功能的理想位置。safe模式类似ScrollTrigger.refresh(true).

刷新时会发生什么？​

每个 ScrollTrigger 将依次按照其创建顺序经历以下步骤：

• 触发一个 "refreshInit" 事件。
• 暂时将任何固定（pinned）元素还原为其非固定状态（即文档流中的自然位置）。
• 如果scrub如果启用了动画，则动画会被暂时重置到起点。
• 根据当前的 DOM（自然流）重新计算 ScrollTrigger 的起始和结束位置。这也意味着如果你为start或者end使用了基于函数的值，则该函数将会被调用。
• 根据新的位置/进度重新启用任何固定（pinned）元素和动画。
• 一个包含update()被调用，这会触发任何适当进度变化的回调。
• ScrollTrigger 实例的onRefresh回调函数被触发。

高级：监听 refresh/refreshInit 事件​

在刷新页面上所有 ScrollTrigger 实例之前，ScrollTrigger 会立即触发一个 "refreshInit" 事件，然后在完成后立即触发一个 "refresh" 事件。你可以添加监听器来相应地调用你自己选择的函数：

ScrollTrigger.addEventListener("refreshInit", function () {
  // this code will run BEFORE the refresh
});

ScrollTrigger.addEventListener("refresh", function () {
  // this code will run AFTER all ScrollTriggers refreshed.
});

还有一个ScrollTrigger.removeEventListener()方法。请注意这两个方法都是静态静态方法，而不是实例方法。

refresh() 和 update() 之间有什么区别？​

refresh()refresh() 包含根据当前 DOM 重新计算 ScrollTrigger 的起始/结束位置，而 update()update()只是检查滚动器的滚动位置并更新任何关联的动画，并在必要时触发回调。因此，refresh()refresh() 涉及更多的工作量，它最终也会调用update()update()。你只应在 DOM 中发生了变化，或需要强制重新计算起始/结束位置时调用refresh()refresh()。