-1

我正在 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()或停止故障的东西！

我试过： scroller: document.querySelector('ion-content') ion-content class=".content-scroll"

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

滚动时如何停止标记？

一些技巧？

提前感谢大家！

4

1 回答 1

0

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

这是一个溢出问题。

在这里解决：

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

于 2021-12-12T00:34:39.360 回答