在VueJS中使用按钮进行水平滚动 [英] Horizontal Scroll Using Buttons in VueJS

问题描述

我希望使用VueJS中的按钮实现水平滚动.我有一个容器，其中有几个div沿水平方向堆叠，我想使用按钮在它们之间滚动.

I'm looking to achieve horizontal scroll using buttons in VueJS. I have a container which has several divs stacked horizontally and I want to scroll through them using the buttons.

此处是针对JQuery的SO上的相同线程. 此演示是JQuery中的解决方案.它应该说明我所追求的效果.

Here is an identical thread on SO for JQuery. This demo is the solution in JQuery. It should illustrate the effect I'm after.

如何使用VueJS达到这种效果?

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

Some libraries I have already taken a look at include vue-scroll-to and jump.

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

• Vue-scroll-to requires the user to specify an element to scroll to whereas I want to horizontally scroll within a specific element by a set amount of pixels.

跳转允许用户滚动显示一定数量的像素，但只能垂直显示，并且似乎只能在窗口上滚动.

Jump allows one to scroll over a defined amount of pixels but only works vertically and appears to only scroll on the window.

我在VanillaJS中找到了一个完成此任务的小库: https://github. com/tarun-dugar/easy-scroll

I found a little library that accomplishes this in VanillaJS: https://github.com/tarun-dugar/easy-scroll

推荐答案

为此我制作了一个沙箱:在此处查看

逻辑是这样的:

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

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

You have a wrapper and you increasing/decreasing the scrollLeft property

完整代码可在此处

这篇关于在VueJS中使用按钮进行水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！