javascript - 如何使用 SetTimeOut 函数在 javascript 中平滑滚动

Question

我使用setTimeOut函数来平滑滚动

但

我的功能无法正常工作。
它工作但不顺利
有人可以帮助我！

const handleScroll = () => {
const pageCards_div = document.getElementsByClassName('page-cards')
for (let i = 0; i < 235; i++) {
  setTimeout(() => {
    pageCards_div[0].scrollLeft += 1
  }, 1000)
}

}

标签： javascripthtmlcss

Answer 1

您的for循环安排了对动画函数的 235 次调用，这些调用将在 1 秒后开始一个接一个地立即调用。

如果您想迈出一步，等待 1 秒，再迈出一步，再等待 1 秒，等等 - 您可以执行以下操作：

const handleScroll = () => {
const pageCards_div = document.getElementsByClassName('page-cards')

let func;
func = (remaining) => {
    if (remaining == 0) {
        return;
    }
    pageCards_div[0].scrollLeft += 1;

    setTimeout(() => {
        func(remaining - 1);
    }, 1000);
};

func(235);