Nuxt集成Locomotive Scroll后不生效，打开检查元素关闭才正常如何解决

你遇到的是Locomotive Scroll典型的高度计算错误问题：布局组件default.vue触发mounted钩子时，内部页面组件的内容还未完全渲染挂载，Locomotive Scroll初始化时计算得到的可滚动高度小于实际值，判断无滚动空间因此平滑滚动功能不生效。打开/关闭控制台会触发window.resize事件，Locomotive Scroll内部监听了该事件会重新计算高度，所以功能恢复正常。

1. 调整初始化时机，补充实例更新逻辑 #

修改default.vue的mounted钩子代码，等所有资源加载完成后再初始化，同时增加路由切换后的实例更新逻辑：

<template>
  <div>
    <div id="appContainer" ref="appContainer" data-scroll-container class="w-screen">
      <Nuxt/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lms: null,
    };
  },
  mounted() {
    // 等待页面所有静态资源加载完成后再初始化
    window.addEventListener('load', () => {
      this.$nextTick(() => {
        // 增加短延迟确保DOM渲染完成
        setTimeout(() => {
          this.initScroll();
          this.lms.update();
        }, 200);
      })
    })
    // 路由切换后更新滚动实例，适配新页面的内容高度
    this.$router.afterEach(() => {
      this.$nextTick(() => {
        setTimeout(() => {
          this.lms?.update();
        }, 150);
      })
    })
  },
  beforeDestroy() {
    // 组件销毁前销毁滚动实例，避免内存泄漏
    this.lms?.destroy();
  },
  methods: {
    initScroll() {
      this.lms = new this.locomotiveScroll({
        el: this.$refs.appContainer,
        smooth: true,
        tablet: {
          smooth: true,
        },
        smartphone: {
          smooth: true,
        },
        getDirection: true,
      });
    },
  },
};
</script>

<style scoped>
#appContainer {
  min-height: 100vh;
}
</style>

2. 补充全局CSS配置 #

在项目全局样式文件中添加如下配置，禁用原生滚动，避免和Locomotive Scroll的滚动逻辑冲突：

html, body {
  height: 100%;
  overflow: hidden;
}

3. 动态内容适配 #

如果你的页面内有异步加载的内容（比如接口返回的列表、懒加载图片），需要在动态内容渲染完成后主动调用滚动实例的update方法更新高度：

// 示例：异步请求完成、图片加载完成后调用
this.$root.lms?.update()

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