告别滚动条抖动：优化setInterval实现流畅滚动

使用setInterval结合scrollTop属性实现自动滚动效果，虽然简单直接，却容易造成滚动条抖动，影响用户体验。本文将分析并解决此类问题，提升滚动流畅度。

以下代码片段展示了常见的抖动问题：

rollStart() {
    const ulbox = document.getElementById("roolList");
    if (ulbox.scrollTop >= ul1.scrollHeight) {
        ulbox.scrollTop = 0;
    } else {
        ulbox.scrollTop += 1;
    }
}

setInterval(this.rollStart, t);

setInterval执行时间间隔的不精确性，以及频繁修改DOM属性，是导致抖动的主要原因。 为了获得更流畅的滚动效果，建议摒弃直接使用setInterval的方法。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

更优方案：利用requestAnimationFrame

requestAnimationFrame是浏览器提供的原生API，它会在浏览器下一次重绘之前执行回调函数，使动画与浏览器渲染周期同步，从而避免抖动并提高效率。 这比直接操作scrollTop更高效，也更符合现代Web开发规范。

使用requestAnimationFrame可以创建更平滑自然的滚动动画，显著改善用户体验。