nuxt 与 locomotive-scroll 和 gsap 问题有关的路线更改

Question

我一直在努力使用机车滚动和 gsap scrollTrigger 和 Scrollproxy 在我的 Nuxtjs 项目上实现平滑滚动效果。但是在我的中途遇到了一些我无法回头的有线问题。我在 Nuxt 项目中使用 Typescript 和 Class Component。

这是我的代码 repo 和 demo link

问题是

1. 更改路线滚动效果被破坏，页面高度变得如此之高。然后必须重新加载该特定页面才能正常工作。需要一个路线更改解决方案，我在此设置中没有任何线索。

这是代码

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

const scrollContainer = document.querySelector('[data-scroll-container]')

const bodyScrollBar = new LocomotiveScroll({
    el: scrollContainer,
    smooth: true,
    initPosition: { x: 0, y: 0 },
    lerp: 0.12,
    getSpeed: true,
    getDirection: true,
    offset:["15%",0],
    tablet: {
        smooth: true,
        direction: 'vertical',
        gestureDirection: 'vertical',
        breakpoint: 1024
    },
    smartphone: {
        smooth: true,
        direction: 'vertical',
        gestureDirection: 'vertical'
    }
})

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

  ScrollTrigger.scrollerProxy('.scroller-wrapper', {
                scrollTop(value) {
                    if(arguments.length) {
                        
                        return arguments.length ?
                        bodyScrollBar.scrollTo(value, 0, 0)  :
                        bodyScrollBar.scroll.instance.scroll.y
                        // return bodyScrollBar.scrollTop = value
                    }
                },
                getBoundingClientRect() {
                    return {
                        left: 0, top: 0,
                        width: window.innerWidth,
                        height: window.innerHeight
                    }
                },
               
                pinType:  scrollContainer.style.transform ? "transform" : "fixed"
            })

ScrollTrigger.addEventListener('refresh', () => bodyScrollBar.update())
ScrollTrigger.addEventListener('resize', () => bodyScrollBar.update())


ScrollTrigger.refresh(true)

1. 机车具有视差和其他效果的实例，例如 data-scroll 和 data-scroll-speed='1' 。刷新页面时它可以正常工作，但是当我更改路线时它不起作用。你可以在我的demo-project-link看到它。

2. 想要滚动页面上具有overflow-scroll 和固定height 的特定部分。但是，当尝试滚动整个页面时，将会滚动，这是意料之外的。从导航中转到**scrollable-div** 菜单。

这部分我想以不同的方式滚动，当我滚动这部分时需要停止整个页面滚动。

需要您的支持和解决方案，因为我遇到了这些有线问题。任何解决方案都会适用。

Answer 1

当我使用 locomotive-scroll 和 Nuxt.js 时，我总是设置 scroll-container 并在每个页面内运行一个新的 locomotive-scroll 实例，我还使用 beforeDestroy() 挂钩销毁该实例。

这样，实例知道它内部的内容并设置每个动画和位置，反之，如果你改变路线，实例是相同的，但 DOM 是不同的。

页面的完整示例：

<template lang="pug">
div(ref="scroll")
  h1 Your HTML here
</template>

<script>
export default {
  data () {
    return {
      scroll: undefined
    }
  },

  beforeDestroy () {
    if (typeof this.scroll !== 'undefined') {
      this.scroll.destroy()
    }
  },

  mounted () {
    this.$nextTick(() => {
      this.enableLocomotiveScroll()
    })
  },

  methods: {
    enableLocomotiveScroll () {
      if (process.client && typeof this.scroll === 'undefined') {
        this.scroll = new this.LocomotiveScroll({
          el: this.$refs.scroll,
          smooth: true
        })

        setTimeout(() => {
          this.scroll.update()
        }, 1000)
      }
    }
  }
}
</script>

当然你可以move this functionality to a mixin 并在每个页面中加载它以避免重复代码。