将 ion-content 绑定为 GSAP Timeline 的滚动条

Posted 2023-03-16

技术标签:

【中文标题】将 ion-content 绑定为 GSAP Timeline 的滚动条【英文标题】：Bind ion-content as scroller of GSAP Timeline 【发布时间】：2022-01-15 04:27:52 【问题描述】：

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

我无法创建将 ion-content 组件标识为滚动条的 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() 或停止故障的东西！！

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

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

如何在滚动时停止标记？

一些提示？

提前感谢大家！

【问题讨论】：

【参考方案1】：

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

这是一个溢出问题。

在这里解决：

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