在 VueJS 中使用按钮水平滚动

Question

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

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

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

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

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

• Jump 允许一个人滚动定义数量的像素，但只能垂直工作，并且似乎只能在窗口上滚动。

编辑：我在 VanillaJS 中找到了一个可以完成此操作的小库： https ://github.com/tarun-dugar/easy-scroll

原文由 p4t 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我为此制作了一个沙箱： 在这里查看

逻辑是这样的：

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

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

完整的代码可以在 这里 找到

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议