css - GSAP Timeline のスクローラーとしてイオンコンテンツをバインド

Question

Ionic アプリケーション (v 6.18.1) に GSAP を実装しています。

イオン コンテンツ コンポーネントをスクローラーとして識別する ScrollTrigger を作成できません。

「中心」に設定された開始パラメータと終了パラメータがスクロールによって移動し、スクロールしていないときに中心に戻るという事実のために、いくつかの不具合を伴う回避策を見つけました。

ここに私のコンポーネントのコード:

  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()またはグリッチを停止するための何かにバインドしたい!!

私が試した: scroller: document.querySelector('ion-content') ion-content class=".content-scroll"

しかし、マーカーはもう表示されません...

スクロール中にマーカーを停止するにはどうすればよいですか?

いくつかのヒント？

事前にみんなに感謝します！