时间戳

首页 > 解决方案 > nuxt 与 locomotive-scroll 和 gsap 问题有关的路线更改

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

问题描述

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

这是我的代码仓库 和演示链接

问题是

  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** 菜单。

在此处输入图像描述 这部分我想以不同的方式滚动，当我滚动这部分时需要停止整个页面滚动。

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

标签： nuxt.jsgsapsmooth-scrollinglocomotive-scrollscrolltrigger

解决方案

当我使用locomotive-scrollNuxt.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>

当然，您可以将此功能移至 mixin，然后将其加载到每个页面中，以避免重复代码。

推荐阅读