在 React/Next.js 中使用平滑滚动条的 GSAP ScrollTrigger 意外行为

如何解决在 React/Next.js 中使用平滑滚动条的 GSAP ScrollTrigger 意外行为

我遇到了在其他上下文中描述过的问题，但尚未找到解决方案。我的项目正在使用 Next.js 框架进行响应、平滑滚动条和 ScrollTrigger。我有一个 .to() ，里面有一个 scrollTrigger 对象，它位于 <Navigation /> 组件中。页面顶部的文本只是应该固定自己并随窗口滚动，但它仅在某些情况下有效。我想我没有完全理解这里的一些生命周期的事情。所有这些重现我的错误的方法也在沙箱中的 index.js 文件的顶部进行了注释。

1. 启用Smooth Scrollbar，scrollTrigger对象存放在<Navigation />组件中，<Navigation />组件导入嵌套在主功能组件中，刷新页面后效果不生效。如果您进入 <Navigation /> 组件中的 scrollTrigger 对象并更新其中一个值（将“结束”值更改为不同的数字），这将触发热重载而不刷新浏览器。如果您滚动回顶部并向下滚动，您将看到效果正在发挥作用。
2. 如果在主 index.js 组件中注释掉整个 useEffect() 钩子，这将禁用平滑滚动条。如果您保存文件并刷新，您将看到效果按预期工作，无需触发热重载，但现在没有平滑滚动条。
3. 如果你把沙箱重置为原来的状态，在index.js主组件返回的HTML中取消注释，注释掉上面的<Navigation />组件，保存然后刷新，就可以看到效果了加载时，使用平滑滚动条，无需触发热重新加载，但现在我失去了嵌套组件的能力。

CodeSandbox link

Direct link to results in browser (A little easier for refreshing)

任何帮助将不胜感激。我现在没有想法。