如何在 javascript 中使用 SetTimeOut function 进行平滑滚动

Question

I have use setTimeOut function to smooth scrolling

But

my function didn't work properly.
It is working but not smoothly
can someone help me!

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

}

Answer 1

Your for loop schedules 235 calls to your animation function, which will be invoked immediately one after the other, starting after 1 second.

If you want to take one step, wait 1s, take another step, wait another 1s, etc. - you can do something like this:

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);