第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

GSAP 3 ScrollTrigger 不適用于動(dòng)態(tài)變化的值(不刷新/重新計(jì)算)

GSAP 3 ScrollTrigger 不適用于動(dòng)態(tài)變化的值(不刷新/重新計(jì)算)

慕娘9325324 2023-07-06 17:49:14
我在使用 GSAP 的 ScrollTrigger 時(shí)遇到問題。我在不同的視口寬度中設(shè)置了固定元素的高度,并且在調(diào)整窗口大小時(shí)效果很好。但現(xiàn)在我想通過單擊按鈕來更改固定元素的高度。我使用ScrollTrigger.refresh();但沒有任何反應(yīng)。有人可以告訴我如何修復(fù)它嗎?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>
查看完整描述

1 回答

?
互換的青春

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超6個(gè)贊

這是一個(gè)有點(diǎn)棘手的情況,因?yàn)槟谡{(diào)整固定的同一元素的大小。ScrollTrigger 會(huì)自動(dòng)緩存維度等,因此當(dāng)刷新發(fā)生時(shí),ScrollTrigger 會(huì)清除所有內(nèi)聯(lián)樣式(這恰好會(huì)清除您設(shè)置的新值),然后恢復(fù)到其緩存狀態(tài)。我們(GreenSock)尚未確定這是否是一個(gè)錯(cuò)誤:)


至于目前如何解決這種情況,您可以在盒子周圍創(chuàng)建一個(gè)空容器并將其固定:


<div class="pin-container">

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

</div>

trigger: ".pin-container"

演示


查看完整回答
反對(duì) 回復(fù) 2023-07-06
  • 1 回答
  • 0 關(guān)注
  • 291 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)