使用setInterval实现自动滚动列表，为什么会出现抖动？-css教程-PHP中文网

使用setInterval实现自动滚动列表，为什么会出现抖动？

心靈之曲

发布： 2025-03-23 08:20:15

原创

1069人浏览过

使用setinterval实现自动滚动列表，为什么会出现抖动？

使用setInterval实现自动滚动列表时，为何会出现抖动？

网页开发中，自动滚动效果（如新闻滚动、商品展示）很常见。 setInterval结合scrollTop属性是常用的实现方式，但容易造成滚动抖动。

读者提供了一个使用setInterval和scrollTop实现自上而下滚动的示例代码：

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

setInterval(this.rollStart, t);

登录后复制

代码每隔t毫秒调用rollStart函数，递增ulbox元素的scrollTop属性，实现向上滚动。滚动到顶部时，scrollTop重置为0，循环滚动。

wordpress主题：格子商铺主题

这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果

查看详情

抖动的原因在于setInterval的执行时间并非完全精确。即使设定了固定的t值，实际执行时间也可能存在细微偏差，导致scrollTop变化不均匀，造成视觉抖动。频繁修改DOM属性也会影响浏览器渲染效率，加剧抖动。

解决方法是避免直接频繁操作scrollTop。建议使用更平滑的DOM API，例如Element.scrollTo()方法，更好地利用浏览器渲染机制，避免抖动。 scrollTo()方法能更平滑地控制滚动位置，提升用户体验。更多细节可参考MDN Web Docs关于Element.scrollTo()方法的文档。

以上就是使用setInterval实现自动滚动列表，为什么会出现抖动？的详细内容，更多请关注php中文网其它相关文章！