如何解决GSAP 3 ScrollTrigger无法使用动态更改的值无法刷新/重新计算 Demo
使用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>
解决方法
这有点棘手,因为您正在调整要固定的元素的大小。 ScrollTrigger自动缓存尺寸,这样在刷新发生时ScrollTrigger会清除所有内联样式(这恰好是清除您设置的新值),然后返回其缓存状态。这是否是一个错误,我们(GreenSock)还没有确定:)
关于目前的解决方法,您可以在盒子周围创建一个空容器,然后将其固定:
<div class="pin-container">
<div class="box"></div>
</div>
trigger: ".pin-container"
Demo
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。