1

我在 Nuxt 应用程序中使用 GSAP ScrollTrigger 和 LocomotiveScroll。到目前为止一切正常，除了改变路线。我想，我必须杀死并重新初始化 LocomotiveScroll和ScrollTrigger？

相关JS：

export default {
  data() {
    return {
      lmS: null
    };
  },

  mounted() {
    this.lmS = new this.locomotiveScroll({
      el: document.querySelector(".js-scroll"),
      smooth: true,
      direction: "horizontal",
      lerp: 0.1,
      smartphone: {
        smooth: false,
        direction: "vertical"
      }
    });

    //////////////////SCROLLTRIGGER SETUP//////////////////

    this.lmS.on("scroll", this.$ScrollTrigger.update);

    var that = this;

    this.$ScrollTrigger.scrollerProxy(".js-scroll", {
      scrollTop(value) {
        return arguments.length
          ? that.lmS.scrollTo(value, 0, 0)
          : that.lmS.scroll.instance.scroll.y;
      },
      scrollLeft(value) {
        return arguments.length
          ? that.lmS.scrollTo(value, 0, 0)
          : that.lmS.scroll.instance.scroll.x;
      },
      getBoundingClientRect() {
        return {
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight
        };
      },
      pinType: document.querySelector(".js-scroll").style.transform
        ? "transform"
        : "fixed"
    });

    this.$ScrollTrigger.addEventListener("refresh", () => this.lmS.update());
    this.$ScrollTrigger.refresh(true);
  },

  destroyed() {
    //window.removeEventListener("refresh", () => this.lmS.update());
    //let triggers = this.$ScrollTrigger.getAll();
    //triggers.forEach((trigger) => {
    //trigger.kill(false, true);
    //});
    this.lmS.destroy();
    this.lmS = null;
  }
};

我设置了一个最小的代码框： https ://codesandbox.io/s/scrolltrigger-routechange-gv75r?file=/mixins/locomotive.js

将不胜感激任何提示！:)

更新的 JS：

export default {
  data() {
    return {
      sTrigger: null
      lmS: null
    };
  },

  mounted() {
    this.lmS = new this.locomotiveScroll({
      el: document.querySelector(".js-scroll"),
      smooth: true,
      direction: "horizontal",
      lerp: 0.1,
      smartphone: {
        smooth: false,
        direction: "vertical"
      }
    });

    //////////////////SCROLLTRIGGER SETUP//////////////////
    this.sTrigger = this.$ScrollTrigger

    this.lmS.on("scroll", this.sTrigger.update);

    var that = this;

    this.sTrigger.scrollerProxy(".js-scroll", {
      scrollTop(value) {
        return arguments.length
          ? that.lmS.scrollTo(value, 0, 0)
          : that.lmS.scroll.instance.scroll.y;
      },
      scrollLeft(value) {
        return arguments.length
          ? that.lmS.scrollTo(value, 0, 0)
          : that.lmS.scroll.instance.scroll.x;
      },
      getBoundingClientRect() {
        return {
          top: 0,
          left: 0,
          width: window.innerWidth,
          height: window.innerHeight
        };
      },
      pinType: document.querySelector(".js-scroll").style.transform
        ? "transform"
        : "fixed"
    });

    this.sTrigger.addEventListener("refresh", () => this.lmS.update());
    this.sTrigger.refresh(true);
  },

  beforeDestroy(){
    window.removeEventListener('refresh', () => this.lmS.update())
    let triggers = this.sTrigger.getAll()
      triggers.forEach(trigger => {
        trigger.kill()
      })
    this.sTrigger = null
  },

  destroyed() {
    this.lmS.destroy();
    this.lmS = null;
  }
};
4

0 回答 0