Question: 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.

[Here](https://stackoverflow.com/questions/25028040/jquery-horizontal-scroll-using-buttons) is an identical thread on SO for JQuery. [This demo](http://next.plnkr.co/edit/GxufhJaRJn2SfGb4ilIl?p=preview) is the solution in JQuery. It should illustrate the effect I'm after.

**How can I achieve that effect using VueJS?**

Some libraries I have already taken a look at include [vue-scroll-to](https://www.npmjs.com/package/vue-scroll-to) and [jump](https://github.com/callmecavs/jump.js).

* 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.

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

Answer: 
> 
> I made a sandbox for this: [see it here](https://jz38xyr559.codesandbox.io)
> 
> 
> 

The logic is this:

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

```

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

The full code can be found [here](https://codesandbox.io/s/jz38xyr559)
You can use JavaScript only, using the example you gave I converted it to JavaScript only and here's the Codepen for it.

<https://codepen.io/immad-hamid/pen/yEmayr>

This is the JavaScript that can replace the example that you sent.

```
const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
const content = document.querySelector('#content');

rightBtn.addEventListener("click", function(event) {
  content.scrollLeft += 300;
  event.preventDefault();
});

leftBtn.addEventListener("click", function(event) {
  content.scrollLeft -= 300;
  event.preventDefault();
});

```

For the animation you have to use something... Can you do that?