JS自动滚动循环功能优化求助：将单次滚动改为循环滚动

嘿，我来帮你搞定这个循环滚动的需求！你原来的代码只能单次向下滚动，我们只需要加个「滚动到底部检测」和「重置回顶部」的逻辑，就能实现无限循环滚动了。

完整代码示例 #

先给你一套直接能用的代码，包含HTML和JavaScript部分：

HTML结构

<!-- 滚动容器，设置固定高度和隐藏溢出 -->
<div id="quadroDeAvisos" style="height: 150px; overflow: hidden; border: 1px solid #ccc;">
  <ul style="margin: 0; padding: 0; list-style: none;">
    <li style="padding: 8px; border-bottom: 1px solid #eee;">List content 1</li>
    <li style="padding: 8px; border-bottom: 1px solid #eee;">List content 2</li>
    <li style="padding: 8px; border-bottom: 1px solid #eee;">List content 3</li>
    <li style="padding: 8px; border-bottom: 1px solid #eee;">List content 4</li>
    <li style="padding: 8px; border-bottom: 1px solid #eee;">List content 5</li>
    <li style="padding: 8px; border-bottom: 1px solid #eee;">List content 1</li>
    <li style="padding: 8px; border-bottom: 1px solid #eee;">List content 2</li>
    <li style="padding: 8px; border-bottom: 1px solid #eee;">List content 3</li>
  </ul>
</div>

JavaScript逻辑

// 获取滚动容器和内部列表
const quadroDeAvisos = document.getElementById("quadroDeAvisos");
const list = quadroDeAvisos.querySelector("ul");

// 可自定义的滚动参数
const scrollSpeed = 2;       // 每次滚动的像素数（越大滚得越快）
const scrollInterval = 30;   // 滚动间隔毫秒（越小越流畅）
const topDelay = 1000;       // 回到顶部后等待多久继续滚动（毫秒）

let scrollTimer; // 存储滚动定时器ID

function startAutoScroll() {
  // 开启定时滚动
  scrollTimer = setInterval(() => {
    // 每次向下滚动指定像素
    quadroDeAvisos.scrollTop += scrollSpeed;
    
    // 检测是否滚动到容器底部
    const isBottom = quadroDeAvisos.scrollTop + quadroDeAvisos.clientHeight >= list.scrollHeight;
    
    if (isBottom) {
      // 先停止当前滚动
      clearInterval(scrollTimer);
      // 平滑滚动回顶部
      quadroDeAvisos.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑动画，去掉就是瞬间跳转
      });
      // 等待顶部滚动完成后，重新启动循环
      setTimeout(startAutoScroll, topDelay);
    }
  }, scrollInterval);
}

// 页面加载完成后启动滚动
window.addEventListener('load', startAutoScroll);

关键逻辑解释 #

• 滚动到底部的判断：scrollTop + clientHeight >= scrollHeight是前端判断容器是否滚动到底的标准公式——容器已滚动的距离 + 容器可视高度 >= 内部内容的总高度，就说明已经滚到底了。
• 循环重启机制：当滚到底部时，先清除当前的滚动定时器，用scrollTo的平滑动画回到顶部，然后延迟一段时间（你可以自己调topDelay）再重新启动滚动，避免内容切换太突兀。
• 参数自定义：你可以根据需求调整scrollSpeed（滚动快慢）、scrollInterval（滚动流畅度）、topDelay（顶部停留时间），找到最适合的效果。

小提示 #

如果不需要平滑回顶部的动画，把scrollTo里的behavior: 'smooth'删掉就行，这样会瞬间跳回顶部，适合追求快速循环的场景。

内容的提问来源于stack exchange，提问作者Eshan Rajapakshe