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

Posted 2023-05-08

【中文标题】nuxt 与 locomotive-scroll 和 gsap 问题有关的路线更改

【英文标题】：nuxt with locomotive-scroll and gsap issue on route change

【发布时间】：2021-12-02 19:27:44

【问题描述】：

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

这是我的代码 repo 和 demo link

问题是

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

这是代码

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)

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

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

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

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

【问题讨论】：

我已经回答了一些关于 locomotive-scroll 的问题，不知道这是否有帮助。

@kissu 你能分享那些回答的链接吗？谢谢

该死，抱歉忘记粘贴链接了！ ***.com/search?q=user%3A8816585+locomotive-scroll

@kissu 我试过了，但没有用，也无法实现我的目的。再次感谢

【参考方案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 并在每个页面中加载它以避免重复代码。

【讨论】：

嘿，@sergio 我很欣赏你的解决方案。但这并不能满足我正在寻找的目的。特别是第 3 个问题。当我在正文中的特定页面上有一个可滚动部分时，我必须在滚动该部分时停止整个正文滚动。这也是我正在寻找解决方案的一个重要问题。如果您尝试该解决方案，那就太好了。当我调整窗口大小时，您的解决方案也不起作用。它的中断并在波纹管中增加了太多空间。谢谢