Javascript GSAP 3 ScrollTrigger不使用动态更改的值（不刷新/重新计算）

我在使用GSAP的ScrollTrigger时遇到问题

我在不同的视口宽度中设置了固定元素的高度，在调整窗口大小时效果很好

但现在我想通过单击按钮来更改固定元素的高度。我使用

ScrollTrigger.refresh（）但什么也没发生

谁能告诉我怎么修吗


ScrollTrigger.create({
触发器：'.box'，
宾：是的，
开始：“上中锋”，
结束：（）=>`+=${$（'.h-500'）.height（）-$（'.box'）.height（）}`，
马克：是的，
id:“盒子”，
onRefreshInit:（）=>{
},
onRefresh:（）=>{
}
});
函数resizeBox（）{
$（'.box'）.css（'height'，'50px'）；
ScrollTrigger.refresh（）；
}
正文{
保证金：0；
}
.空间{
宽度：100%；
}
.h-500{
高度：500px；
背景：黄色；
}
.h-1000{
高度：1000px；
}
.盒子{
宽度：100px；
高度：100px；
背景：红色；
}
钮扣{
位置：固定；
排名：0；
右：0；
z指数：999；
字体大小：20px；
}
@仅介质屏幕和（最大宽度：600px）{
.盒子{
高度：5vw；
}
}

resizeBox
这是一种有点棘手的情况，因为您正在调整要固定的同一元素的大小。ScrollTrigger会自动缓存维度，因此当刷新发生时，ScrollTrigger会清除所有内联样式（恰好清除您设置的新值），然后恢复到其缓存状态。这是否是一个bug，我们（格林斯托克）还没有确定：）

至于如何解决目前的情况，您可以在箱子周围创建一个空容器，并将其固定：

<div class="pin-container">
  <div class="box"></div>
</div>

trigger: ".pin-container"