scrollLeft animation - clean vanilla JS

Question

I have a question , there is possible to add animation to scrollLeft in clean vanilla JS ?

I added container with overflow:scroll and after click scrollLeft is scrolling + 100, but with no animation :(

To test it please wrap window to mobile view.

Here is the link to my codepen:

**https://codepen.io/pawel_wojkiewicz/pen/YzyBQvj**

Answer 1

Element.scroll() has a behavior option which can be set to smooth

document.querySelector('.box').addEventListener('click', function () {
    this.scroll({
        left: 0,
        top: 0,
        behavior: 'smooth'
    })
});

.box {
    width: 300px;
    overflow-x: scroll;
    background-color: #eeeeee;
    padding: 20px;
}

.box .text {
    width: 500px;
    display: block;
    font-size: 30px;
}

<div class="box"><span class="text">this textbox scrolls to the left smoothly when clicked.</span></div>

Answer 2

you can use scrollBy together with smooth behavior:

document.querySelector('.box').addEventListener('click', function () {
    this.scrollBy({
        left: 100,
        top: 0,
        behavior: 'smooth'
    })
});