如何实现UL元素的无限自动滚动？

要让UL列表单独滚动而不是整个页面，核心是让UL的父容器成为可滚动区域，然后针对这个容器做滚动动画，而不是操作html/body。以下是修正后的完整方案：

步骤1：设置可滚动容器的样式 #

给包裹UL的div添加类名（比如scroll-container），并设置固定高度和垂直滚动属性，让容器内内容超出时生成独立滚动条：

.scroll-container {
  height: 400px; /* 按需调整高度 */
  overflow-y: auto;
}

步骤2：修改JavaScript代码 #

把原本操作html, body的逻辑，改成操作这个可滚动容器，滚动目标改为容器的scrollHeight（容器内内容的总高度）：

<div id="top"></div>
<div class="scroll-container">
   <ul> 
      <li>Lorem ipsum<span>Quis nostrud exercitation</span></li>
      <li>Test 17<span>Test 17</span></li>
      <li>Test 9<span>Test 9</span></li>
      <li>Test 10<span>Test 10</span></li>
      <li>Test 11<span>Test 11</span></li>
      <li>Test 12<span>Test 12</span></li>
      <li>Test 13<span>Test 13</span></li>
      <li>Test 14<span>Test 14</span></li>
      <li>Test 15<span>Test 15</span></li>
      <li>Test 18<span>Test 18</span></li>
      <li>Test 2<span>Test </span></li>
      <li>Test 16<span>Test 16</span></li>
      <li>Test 19<span>Test 19</span></li>
      <li>Test 3<span>Test </span></li>
      <li>Test 20<span>Test 20</span></li>
      <li>Test 21<span>Test 21</span></li>
      <li> Nam libero tempore<span>Cum soluta nobis est</span></li>
      <li>Test 5<span>Test </span></li>
      <li>Test 6<span>Test </span></li>
      <li> Et harum quidem<span>Temporibus autem quibusdam</span></li>
      <li>Test 23<span>Test 23</span></li>
      <li>Test 22<span>Test 22</span></li>
      <!-- 剩余LI项保持不变 -->
   </ul>
</div>
<div id="bottom"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript"> 
const $container = $('.scroll-container');

// 封装滚动到底部的函数
function scrollDown() {
  $container.animate({ scrollTop: $container[0].scrollHeight }, 4000, function() {
    // 滚动到底部后短暂停顿，再滚动回顶部
    setTimeout(scrollUp, 1000);
  });
}

// 封装滚动到顶部的函数
function scrollUp() {
  $container.animate({ scrollTop: 0 }, 4000, function() {
    // 滚动到顶部后短暂停顿，开启下一轮滚动
    setTimeout(scrollDown, 1000);
  });
}

// 启动滚动循环
scrollDown();
</script>

关键说明 #

• 之前替换html为#top、body为#bottom无效的原因：这两个div是空元素，没有可滚动的内容区域，也未设置高度和overflow属性，无法形成独立滚动上下文。
• 必须给UL的父容器设置固定高度和overflow-y: auto，让容器成为独立的滚动区域，动画才能作用于这个局部范围。
• 优化后的代码用函数封装逻辑，避免重复代码，添加短暂停顿让滚动过渡更自然。

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