Nuxt集成locomotive-scroll与GSAP时路由切换滚动异常问题求助

问题1：路由切换后滚动效果失效、页面高度异常 #

原因是Nuxt为SPA架构，路由切换时旧页面DOM销毁，你全局初始化的Locomotive Scroll实例仍然绑定旧DOM节点，且未清理已失效的ScrollTrigger实例，导致高度计算异常。
解决方案：

• 不要全局只初始化一次Locomotive Scroll和ScrollTrigger，将初始化逻辑放到页面类组件的mounted钩子中，确保每次新页面DOM挂载完成后再执行初始化
• 在页面类组件的beforeDestroy钩子中执行销毁逻辑：

beforeDestroy() {
  if (this.bodyScrollBar) {
    this.bodyScrollBar.destroy()
  }
  ScrollTrigger.killAll()
  ScrollTrigger.removeEventListener('refresh', this.updateLocomotive)
  ScrollTrigger.removeEventListener('resize', this.updateLocomotive)
}

• 初始化时注意先获取当前页面最新的data-scroll-container节点，再初始化实例，初始化完成后调用ScrollTrigger.refresh(true)和this.bodyScrollBar.update()强制重新计算页面高度

问题2：路由切换后data-scroll等视差属性失效 #

原因是Locomotive Scroll仅会在初始化时扫描一次页面上的滚动相关自定义属性，路由切换后新页面的DOM节点未被识别扫描。
解决方案：

• 每次新页面初始化Locomotive Scroll实例完成后，额外调用this.bodyScrollBar.scroll.update()方法，强制重新扫描当前页面所有带data-*滚动属性的节点
• 确认你页面上的视差元素没有使用服务端渲染相关的指令导致客户端激活后属性丢失，必要时可以将data-scroll等属性写在原生HTML标签上，不要通过动态绑定生成

问题3：独立滚动区块滚动时触发整页滚动 #

原因是Locomotive Scroll默认会监听页面所有滚轮、触摸事件，子滚动区块的事件冒泡后会被整页滚动逻辑拦截。
解决方案：

• 初始化Locomotive Scroll时添加classScrollToIgnore配置，给你的独立滚动区块添加对应的忽略类即可：

const bodyScrollBar = new LocomotiveScroll({
  el: scrollContainer,
  // 其他原有配置保留
  classScrollToIgnore: 'ignore-locomotive-scroll'
})

• 给你的独立滚动区块添加类名ignore-locomotive-scroll，也可以额外给区块绑定wheel、touchmove事件并阻止冒泡，双重保险：

<div class="your-scroll-box ignore-locomotive-scroll" @wheel.stop @touchmove.stop>
  <!-- 滚动内容 -->
</div>

内容的提问来源于stack exchange，提问作者Raydoan Anik