在Vue.js中使用机车滚动时，水平滚动不工作

ahy6op9u 于 2023-02-24 发布在 Vue.js

关注(0)|答案(1)|浏览(229)

我有两个页面主页（垂直滚动）和关于（水平滚动），我试图使用平滑滚动，但我面临着一些问题。
如果我从主页导航到“关于”，水平滚动将停止在“关于”页面上工作。刷新“关于”页面，使水平滚动再次工作。
所以我重做了一个最小版本来检查可能是什么问题，我发现import "../assets/locomotive-scroll.css";是问题所在，我尝试了多种方法，根据路线，生命周期加载CSS。

复制问题

1.打开项目并在新选项卡中预览（默认预览似乎无法平滑滚动）
1.平滑滚动表情符号是工作在家里
1.通过单击“转到关于”导航到关于
1.验证水平滚动是否不工作（刷新页面使其再次工作）
1.删除import "../assets/locomotive-scroll.css";
1.表情符号上的平滑滚动停止工作，但关于水平滚动工作
codesandbox.io link（在新选项卡中打开预览）

vue.js

来源：https://stackoverflow.com/questions/75527291/horizontal-scroll-not-working-when-using-locomotive-scroll-in-vue-js

1条答案

按热度按时间

qxgroojn1#

刚刚弄明白，我不得不使用机车约与direction: horizontal代替GSAP。

const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    direction: 'horizontal',
});

赞(0）回复(0）举报 2023-02-24

我来回答

在Vue.js中使用机车滚动时，水平滚动不工作

1条答案

相关问题

热门标签

最新问答