将离子内容绑定为 GSAP 时间轴的滚动条

Question

我正在 Ionic 应用程序 (v 6.18.1) 中实施 GSAP。

我无法创建将 ion-content 组件标识为滚动条的 ScrollTrigger。

我找到了一个解决方法，它带有一些小故障，因为开始和结束参数设置为 'center' 通过滚动移动并且 return 在不滚动时居中所以 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 作为 scroller 绑定到 ScrollTrigger.create() 或者一些停止故障的东西！！

我试过：滚动条：document.querySelector('ion-content') ion-content class=".content-scroll"

但我再也看不到标记了...

滚动时如何停止标记？

一些提示？

先谢谢大家了！

Answer 1

好的，我在 GSAP 论坛上找到了解决方案。

这是一个溢出问题。

这里解决了：

https://stackblitz.com/edit/ionic-wxueqy?file=pages%2Fhome%2Fhome.ts

将离子内容绑定为 GSAP 时间轴的滚动条

Bind ion-content as scroller of GSAP Timeline

css

angular

ionic-framework

gsap

scrolltrigger