Vue.js中使用Locomotive Scroll时横向滚动失效问题

我有两个页面：Home（纵向滚动）和About（横向滚动），在使用平滑滚动时遇到异常：从Home页面跳转至About页面后，About页面的横向滚动功能完全失效，只有刷新该页面才能恢复正常。

我搭建了极简版本排查问题，定位到import "../assets/locomotive-scroll.css";是冲突根源。尝试过路由按需加载CSS、生命周期内加载等方案，均未解决问题。

问题复现步骤 #

• 打开项目并在新标签页预览（默认预览环境下平滑滚动不生效）
• Home页面的表情元素平滑滚动功能正常
• 点击“Go to About”跳转至About页面
• 验证发现About页面横向滚动失效（刷新页面后功能恢复）
• 移除代码中的import "../assets/locomotive-scroll.css";语句
• Home页面表情元素的平滑滚动失效，但About页面横向滚动功能恢复正常

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