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

我遇到了一个我在其他上下文中看到过的问题，但还没有找到解决方案。我的项目将Next.js框架用于react、Smooth Scrollbar和ScrollTrigger。我有一个.to（），里面有一个scrollTrigger对象，它位于

组件中。页面顶部的文本只需固定自身并随窗口滚动，但它只在某些情况下起作用。我想我还没有完全理解一些生命周期的东西。所有这些重现我的错误的方法也会在沙箱中index.js文件的顶部进行注释

启用平滑滚动条、存储在

组件中的scrollTrigger对象以及导入并嵌套在主功能组件中的

组件后，刷新页面后效果不起作用。如果进入

组件中的scrollTrigger对象并更新其中一个值（将“end”值更改为不同的数字），这将触发热重新加载，而不刷新浏览器。如果您向后滚动到顶部并向下滚动，您将看到效果正在发挥作用

如果注释掉main index.js组件中的整个useffect（）钩子，这将禁用平滑滚动条。如果保存文件并刷新，您将看到效果按预期工作，无需触发热重新加载，但现在没有平滑的滚动条

如果您将沙盒重置为原始状态，在main index.js components return中取消对HTML的注释，注释掉它上面的

组件，保存然后刷新，您将看到效果在加载时工作，滚动条平滑，无需触发热重新加载，但是现在我已经失去了嵌套组件的能力

任何帮助都将不胜感激。我现在没有主意了