我正在 Ionic 應用程式 (v 6.18.1) 中實作 GSAP。
我無法創建將離子含量組件標識為滾動條的 ScrollTrigger。
我發現了一個解決方法，由于設定為“中心”的開始和結束引數通過滾動移動并在不滾動時回傳中心，因此使用pin:true（我需要它）有一個明顯的故障。
這是我的組件的代碼：
ngOnInit() {
gsap.registerPlugin(ScrollTrigger);
gsap.utils.toArray('.section').forEach((r) => {
this.scaleFrom0(r);
});
}
scaleFrom0(trigger) {
const animation = timeline()
.from(trigger, {
scale: 0,
})
.to(trigger, {
scale: 2,
})
return ScrollTrigger.create({
animation,
trigger,
scroller: '.content-scroll',
scrub: 2,
snap: 1 / 2,
pin: true,
pinSpacing: true,
start: `top center`,
end: ' =1000px center',
markers: true,
});
}.content-scroll {
position: absolute;
// border: solid 1px red;
// margin: 50px;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
background: rgb(0, 0, 0, 0.5);
// background: var(--ion-color-primary);
}<ion-content>
<div class="content-scroll">
<div class="presenter">
<strong>TITLE</strong>
</div>
<div class="section">
<app-section></app-section>
</div>
<div class="section">
<app-section></app-section>
</div>
<div class="section">
<app-section></app-section>
</div>
<div class="section">
<app-section></app-section>
</div>
</div>
</ion-content>我想洗掉 div.content-scroll 并將 ion-content 作為滾動條系結到 ScrollTrigger.create()或 SOMETHING FOR TO STOP GLITCHES 中！！
我試過： scroller: document.querySelector('ion-content') ion-content
但是我再也看不到標記了...
滾動時如何停止標記？
一些技巧？
提前謝謝大家！
uj5u.com熱心網友回復：
好的，我在 GSAP 論壇上找到了解決方案。
這是一個溢位問題。
在這里解決：
https://stackblitz.com/edit/ionic-wxueqy?file=pages/home/home.ts
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/380227.html