javascript - 在 VueJS 中使用按钮水平滚动

Question

我希望在 VueJS 中使用按钮实现水平滚动。我有一个容器，其中有几个水平堆叠的 div，我想使用按钮滚动浏览它们。

Here是 SO for JQuery 上的相同线程。 This demo是 JQuery 中的解决方案。它应该说明我所追求的效果。

如何使用 VueJS 实现这种效果？

我已经看过的一些库包括 vue-scroll-to和 jump .

• Vue-scroll-to 要求用户指定要滚动到的元素，而我想在特定元素内水平滚动一定数量的像素。

• Jump 允许滚动定义数量的像素，但仅在垂直方向上起作用，并且似乎只在窗口上滚动。

编辑:我在 VanillaJS 中找到了一个小库来完成这个:https://github.com/tarun-dugar/easy-scroll

Answer 1

I made a sandbox for this: see it here

逻辑是这样的:

scroll_left() {
  let content = document.querySelector(".wrapper-box");
  content.scrollLeft -= 50;
},
scroll_right() {
  let content = document.querySelector(".wrapper-box");
  content.scrollLeft += 40;
}

你有一个包装器，你增加/减少了 scrollLeft 属性

可以找到完整的代码here