Gsap 竖屏或横屏无法正常工作

Question

我在 gsap 垂直和水平屏幕中出现了 gacing 问题，当我滚动时，它不会停在整页上

让section = gsap.utils.toArray(“.section”)

sections.forEach((section, i) => { if (section.classList.contains('horizontal')) {

  const cardsWrap = section.querySelector('.section__cards') 
  const oneCard = section.querySelector('.section__card') 
  

  gsap.to(cardsWrap, {
    x: () => { return -( (cardsWrap.scrollWidth - window.innerWidth + window.innerWidth*0.01) + (window.innerWidth/1 - oneCard.offsetWidth/1) ) },
    ease: "none",
    scrollTrigger: {
      trigger: section,
      start:() => "center center",
      end: () => "+=" + cardsWrap.scrollWidth,
      scrub: 1,
      pin:true,
      snap: 1 / (sections.length - 1),
      pin: i === sections.length -1 ? false : true,
      invalidateOnRefresh: true,
      anticipatePin: 1,
    },        
  });
    

}其他{

ScrollTrigger.create({
  markers: false,
  trigger: section,
  start: () => "top top",
  pin:true,
  pin: i === sections.length -1 ? false : true,
  anticipatePin: 1,
});

}

});

Answer 1

这是代码：

let sections = gsap.utils.toArray(".section")

sections.forEach((section, i) => {
  if (section.classList.contains('horizontal')) {
    const cardsWrap = section.querySelector('.section__cards')
    const oneCard = section.querySelector('.section__card')

    gsap.to(cardsWrap, {
      x: () => { return -((cardsWrap.scrollWidth - window.innerWidth + window.innerWidth * 0.01) + (window.innerWidth / 1 - oneCard.offsetWidth / 1)) },
      ease: "none",
      scrollTrigger: {
        trigger: section,
        start: () => "center center",
        end: () => "+=" + cardsWrap.scrollWidth,
        scrub: 1,
        pin: i === sections.length - 1 ? false : true,
        snap: 1 / (sections.length - 1),
        invalidateOnRefresh: true,
        anticipatePin: 1,
      },
    });

  } else {

    ScrollTrigger.create({
      markers: false,
      trigger: section,
      start: () => "top top",
      pin: i === sections.length - 1 ? false : true,
      anticipatePin: 1,
    });

  }
});