scrollLeft 动画 - 干净的香草 JS

Question

我有一个问题，是否可以在干净的 vanilla JS 中向 scrollLeft 添加动画？

我添加了带有溢出的容器：滚动，单击后 scrollLeft 滚动 + 100，但没有动画:(

要测试它，请将窗口包装到移动视图。

这是我的代码笔的链接：

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

Answer 1

Element.scroll()有一个behavior选项，可以设置为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>