GSAP 3 ScrollTrigger 不适用于动态变化的值（不刷新/重新计算）

Question

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

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

但现在我想通过单击按钮来更改固定元素的高度。我使用ScrollTrigger.refresh();但没有任何反应。

有人可以告诉我如何修复它吗？

ScrollTrigger.create({

  trigger: '.box',

  pin: true,

  start: 'top center',

  end: () => `+=${$('.h-500').height() - $('.box').height()}`,

  markers: true,

  id: "box",

  onRefreshInit: () => {

  },

  onRefresh: () => {

  }

});

function resizeBox(){

  $('.box').css('height', '50px');

  ScrollTrigger.refresh();

}

body{

  margin: 0;

}

.space {

  width: 100%;

}

.h-500 {

  height: 500px;

  background: yellow;

}

.h-1000 {

  height: 1000px;

}

.box {

  width: 100px;

  height: 100px;

  background: red;

}

button {

  position: fixed;

  top: 0;

  right: 0;

  z-index: 999;

  font-size: 20px;

}

@media only screen and (max-width: 600px) {

  .box {

    height: 5vw;

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

<div class="space h-1000"></div>

<div class="space h-500">

  <div class="box"></div>

</div>

<div class="space h-1000"></div>

<button onclick="resizeBox()">resizeBox</button>

Answer 1

这是一个有点棘手的情况，因为您正在调整固定的同一元素的大小。ScrollTrigger 会自动缓存维度等，因此当刷新发生时，ScrollTrigger 会清除所有内联样式（这恰好会清除您设置的新值），然后恢复到其缓存状态。我们（GreenSock）尚未确定这是否是一个错误:)至于目前如何解决这种情况，您可以在盒子周围创建一个空容器并将其固定：<div class="pin-container">&nbsp; <div class="box"></div></div>trigger: ".pin-container"演示