JavaScript 实现循环自动滚动与鼠标悬停暂停功能

<div id="div1">
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
  This is a DIV<br>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

#div1 {
  height: 100px; /* 可视区域高度 */
  width: 200px;
  border: 1px solid #ccc;
  overflow: auto; /* 启用滚动条 */
}

// 全局变量，用于控制滚动状态
var scrollSpeed = 5000; // 滚动动画持续时间（毫秒）
var scrollDirection = 1; // 1 表示向下滚动，-1 表示向上滚动
var paused = false; // 是否处于暂停状态
var isMouseOver = false; // 鼠标是否悬停在元素上

/**
 * 启动或恢复滚动动画的函数
 */
function startScroll() {
  var div1 = $('#div1');
  var divHeight = div1.height(); // div的可见高度
  var scrollHeight = div1.prop('scrollHeight'); // div内容的完整高度

  // 只有在非暂停且鼠标未悬停时才执行滚动
  if (!paused && !isMouseOver) {
    if (scrollDirection === 1) {
      // 向下滚动
      div1.animate({ scrollTop: scrollHeight - divHeight }, scrollSpeed, 'linear', function() {
        // 动画完成后，切换方向，并立即滚动到顶部以准备下一次向上滚动
        scrollDirection = -1;
        // 注意：这里需要确保滚动到底部后，再动画到顶部，或者直接跳到顶部重新开始
        // 原始代码是直接滚动到scrollHeight，然后scrollTop(0)再开始
        // 为了实现上下循环，这里需要调整逻辑
        // 如果是向下滚动到底部，下次应该向上滚动
        // 修正为：向下滚动到最底部，然后切换方向，下一次animate会向上
        // 或者：向下滚动到底部，然后立即跳到顶部，再开始向下滚动 (如果想模拟跑马灯)
        // 按照原需求“上下循环”，则应是滚动到底部后，切换方向，然后向上滚动
        // 原始代码的逻辑是滚动到底部，然后scrollTop(0)再startScroll()，这会造成跳跃
        // 我们需要的是平滑地上下往复。
        // 修正后的逻辑：滚动到底部后，切换方向，然后调用startScroll()，让它向上滚动
        startScroll();
      });
    } else {
      // 向上滚动
      div1.animate({ scrollTop: 0 }, scrollSpeed, 'linear', function() {
        // 动画完成后，切换方向，并调用startScroll()，让它向下滚动
        scrollDirection = 1;
        startScroll();
      });
    }
  }
}

// 文档加载完成后执行
$(document).ready(function() {
  // 初始启动滚动
  startScroll();

  // 鼠标进入事件：暂停滚动
  $('#div1').mouseenter(function() {
    isMouseOver = true;
    paused = true;
    $('#div1').stop(); // 停止当前正在进行的动画
  });

  // 鼠标离开事件：恢复滚动
  $('#div1').mouseleave(function() {
    isMouseOver = false;
    paused = false;
    startScroll(); // 恢复滚动
  });
});