为什么GSAP在PC上Chrome的“移动视图”上运行良好，但在实际手机上却很混乱

Question

所以，我正在开发一个项目，其中有一个动画，当用户滚动到它时会触发该动画。这适用于 PC，也适用于移动视图，在 Chrome 中的“设备工具栏”上，但在手机中查看时存在问题， 这是 gsap 代码的一部分：

  roadmap.forEach((item) => {
    const left = item.querySelector(".left")
    const right = item.querySelector(".right")
    gsap.to(left, {
      x:"-100vw",
      duration:1,
      scale:3,
      scrollTrigger:{
        trigger:item,
        start:"top 5%",
        end:"115% 30%",
        ease:"none",
        scrub:false,
        toggleActions:"play none reverse reverse"
      }
    })
    gsap.to(right, {
      x:"100vw",
      duration:1,
      scale:3,
      scrollTrigger:{
        trigger:item,
        start:"top 5%",
        end:"115% 30%",
        ease:"none",
        scrub:false,
        toggleActions:"play none reverse reverse"
      }
    })
  })

我尝试更改滚动触发的开始和结束字段，但没有任何变化

Answer 1

您的问题在真实的移动设备中很常见。造成这个问题的主要原因是手机浏览器的浮动地址栏。当您向上滚动某些像素时，它会消失，导致 HTML 元素的高度增加。这就是为什么滚动触发器看起来好像一团糟的原因。

解决此问题的一个简单方法是参考GSAP 文档主题

normalizeScroll()

。

如果您需要任何进一步帮助，请在 codepen 中创建一个最小的 GSAP 演示并分享说明您的问题的链接。

这是链接normalizeScroll()