LocomotiveScroll和Gsap的Nuxt

Question

我一直在努力将机车卷轴和格萨普实现到一个Nuxt项目中。我相信这和DOM和SSR有关。我检查了所有的文档，从滚动代理Gsap，到Nuxt和火车头，但我没有更多的线索。

如果你们有什么建议的话，我们非常欢迎你们帮忙。谢谢您抽时间见我。

这里是错误

TypeError:无法读取未定义的属性“滚动” Uncaught：_triggers_i.update不是函数 未定义TypeError:无法读取未定义属性的“匹配”

是在plugins/中创建的

import Vue from "vue";
import locomotiveScroll from "locomotive-scroll";

Object.defineProperty(Vue.prototype, "locomotiveScroll", {
  value: locomotiveScroll
});

在nuxt.config.js中配置

css: [
  //smooth scroll
  '@/assets/css/scroll.css',
],
plugins: [
  {
    src: "~/plugins/locomotive.js",
    mode: "client"
  }
],

在app.vue中添加

<script>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
import LocomotiveScroll from "locomotive-scroll"
</script>

在app.vue的挂载钩子中发射

this.locoScroll = new LocomotiveScroll({
  el: document.querySelector('.smooth-scroll'),
  smooth: true,
})

this.locoScroll.on('scroll', ScrollTrigger.update)

ScrollTrigger.scrollerProxy('.smooth-scroll', {
  scrollTop(value) {
    return arguments.length
      ? this.locoScroll.scrollTo(value, 0, 0)
      : this.locoScroll.scroll.instance.scroll.y
  },
  getBoundingClientRect() {
    return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }
  },
  pinType: document.querySelector('.smooth-scroll').style.transform ? 'transform' : 'fixed',
})

ScrollTrigger.addEventListener('refresh', () => this.locoScroll.update())
ScrollTrigger.refresh()

Answer 1

试着一次只关注一个问题：

• 你在和GSAP做什么斗争？你试过这个努克斯-格萨模块了吗？对我来说超棒的工作。ScrollTrigger在那里是可用的。
• 我不知道为什么要将app.vue用于机车卷轴，但是您可能应该在简单的page或component中尝试最基本的用例，并在默认布局最大时插入它，海事组织。然后，你也许可以考虑优化它。

如果您能够正确地安装GSAP，并且正在与locomotive-scroll进行斗争，那么您可以在Codesandbox上创建一个托管示例。但是如果你不想太费劲的话，你也许可以去找一些Vuejs 视差包，如果你觉得GSAP还不够的话，你可能会找到一些适合你的东西。

Answer 2

this在滚动触发器中引用自身，因此您需要将locomotivescroll放入一个不用this的变量中。在我的情况下，我通过了参数！

export default {
  data() {
    return {
      locoScroll: {},
    }
  },
  mounted() {
    this.locoScroll = new this.locomotiveScroll({ el: document.querySelector('#js-scroll'), smooth: true })
    window.addEventListener('resize', _.debounce(this.onlocoScrollResize, 100))

    this.locoScroll.scrollTo(0, 0, 0)

    this.$nextTick(() => {
      setTimeout(() => {
        const sections = document.querySelectorAll('section[data-scroll-11section]')
        this.resizeSectionsObserver(sections)
        this.locoScroll.update()
      }, 500)
    })

    let el = document.querySelector('#js-scroll')
    this.smooth(this.locoScroll, el)
  },

  methods: {
    smooth(scroll, el) {
      gsap.registerPlugin(ScrollTrigger)

      scroll.on('scroll', ScrollTrigger.update)

      ScrollTrigger.scrollerProxy(el, {
        scrollTop(value) {
          return arguments.length ? scroll.scrollTo(value, 0, 0) : +scroll.scroll.instance.scroll.y.toFixed(4)
        },
        getBoundingClientRect() {
          return {
            top: 0,
            left: 0,
            width: window.innerWidth,
            height: window.innerHeight,
          }
        },
        pinType: el.style.transform ? 'transform' : 'fixed',
      })
      ScrollTrigger.defaults({ scroller: el })
      ScrollTrigger.addEventListener('refresh', () => scroll.update())
      ScrollTrigger.refresh()
    },
    onlocoScrollResize() {
      this.locoScroll.update()
    },
    resizeSectionsObserver(elements) {
      const resizeCallback = () => {
        this.locoScroll.update()
      }
      const observer = new ResizeObserver(resizeCallback)
      elements.forEach(el => {
        observer.observe(el)
      })
    }
  },
  destroyed() {
    this.locoScroll.destroy()
    window.removeEventListener('resize', this.onlocoScrollResize)
  },
}

我在一个Nuxt应用程序中使用这个代码片段，我有一个问题，因为它只在第一个调用上工作！