带有 LocomotiveScroll 和 Gsap 的 Nuxt

问题描述

我一直在努力将 locomotive-scroll 和 Gsap 实施到 Nuxt 项目中。我相信这与 DOM 和 SSR 有关。我检查了从 scrollproxy Gsap 到 Nuxt 和 locomotive 的所有文档，但我没有更多线索。

如果你们有任何建议，我们非常欢迎帮助。感谢您抽出宝贵时间。

这里是错误

TypeError：无法读取未定义的属性“滚动”
未捕获的类型错误：_triggers[_i].update 不是函数
未捕获的类型错误：无法读取未定义的属性“匹配”

在 plugins/locomotive.js 中创建

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)
      : 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()

解决方法

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

• 您在 GSAP 方面有什么困难？你试过这个 nuxt-gsap 模块吗？在我身边工作超级棒。 ScrollTrigger 在那里可用。
• 我不知道您为什么将 app.vue 用于 locomotive-scroll，但您可能应该在简单的 page 或 component 中尝试最基本的用例并将其插入最大在默认布局 IMO。然后，您可以考虑优化它。

如果您正确安装 GSAP 并且遇到 locomotive-scroll，您可以在 Codesandbox 上制作一个托管示例。但是如果你不想太费心，你可以找一些 Vuejs parallax packages，如果 GSAP 不够，你可能会找到适合你的东西。

,

你好，scrolltrigger 中的“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)

        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) : +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 应用程序中使用此代码片段我遇到了问题，因为它仅适用于第一次调用！