Question

我有一个问题，可以在干净的香草JS中向scrollLeft添加动画吗？

我添加了带有溢出：scroll的容器，并在单击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>

Answer 2

您可以将 scrollBy 与 smooth 行为结合使用：

document.querySelector('.box').addEventListener('click', function () { this.scrollBy({ 左：100，顶部：0，行为：“平稳” }) });

scrollLeft动画-干净的香草JS

2 个答案: