console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

  <head>
    <title>Page Title</title>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
    <style>
      #scroll-container {
        width: 300px;
        height: 250px;
        overflow: hidden;
        position: relative;
        cursor: move;
      }

      #scroll-text {
        position: absolute;
        width: 100%;
        height: auto;
        margin: 0;
        line-height: 25px;
        text-align: center;
        user-select: none;
        background-color: yellow;
      }

    </style>
  </head>

  <body>
    <div id="scroll-container">
      <div id="scroll-text">
        <div class="data data-eight" style="height:auto;">
          <div class="temperature" style="display: none;">大气温度<br>24.1℃</div>
          <div class="pressure" style="display: none;">大气气压<br>1000 hPa</div>
          <div class="unit"></div>
          <ul class="ele"></ul>
          <ul class="error-list"></ul>
          <p><span>核心CPU温度</span><span>27.8</span><span>℃</span></p>
          <p><span>系统CPU占用</span><span>8.25</span><span>%</span></p>
          <p><span>系统内存剩余</span><span>2739</span><span>MB</span></p>
          <p><span>系统磁盘剩余</span><span>31754</span><span>MB</span></p>
          <p><span>网络下载速度</span><span>34</span><span>KB</span></p>
          <p><span>网络上传速度</span><span>5</span><span>KB</span></p>
          <p><span>网络1</span><span>开启</span><span></span></p>
          <p><span>网络2</span><span>开启</span><span></span></p>
          <p><span>网络3</span><span>开启</span><span></span></p>
          <p><span>核心主板温度</span><span>1</span><span>℃</span></p>
          <p><span>电池电量</span><span>1</span><span>(Lsp)</span></p>
          <p><span>用户CPU占用</span><span>1</span><span>%</span></p>
          <p><span>系统磁盘剩余</span><span>1</span><span>(Lsp)</span></p>
          <p><span>4G信号强度</span><span>1</span><span>(Lsp)</span></p>
        </div>
      </div>
    </div>
    <script>
      const speed = 20; //滚动速度(px/s)
      const milliSeconds = 500;
      var stop = false;
      var isDragging = false;
      var dragStartY;
      const scrollContainer = document.getElementById("scroll-container");
      const scrollText = document.getElementById("scroll-text");
      const regexTranY = /matrix\(.*,.*,.*,.*,.*, (-?\d+(?:\.\d+)?)\)/;
      var tranY = scrollContainer.offsetHeight;
      $(scrollContainer).off('mousedown');
      $(scrollContainer).off('mousemove');
      $(scrollContainer).off('mouseleave');
      $(scrollContainer).off('mouseup');
      $(scrollContainer).off('mouseover');
      $(scrollContainer).off('animationiteration');
      
      function handleMouseDown(event) {
        isDragging = true;
        stop = true;
        dragStartY = event.clientY - tranY;
      }

      function handleMouseMove(event) {
        if (isDragging) {
          const maxHeight = scrollContainer.offsetHeight;
          var offsetY = event.clientY - dragStartY;
          tranY = offsetY;
          scrollText.style.transform = `translateY(${offsetY}px)`;

        }
      }

      function handleMouseLeave(event) {
        isDragging = false;
        stop = false;
        moveNextThrottled();
      }

      function handleMouseUp(event) {
        isDragging = false;
        stop = false;
        moveNextThrottled();
      }

      function handleMouseOver(event) {
        stop = true;
      }

      $(scrollContainer).on('mousedown', handleMouseDown);
      $(scrollContainer).on('mousemove', handleMouseMove);
      $(scrollContainer).on('mouseleave', handleMouseLeave);
      $(scrollContainer).on('mouseup', handleMouseUp);
      $(scrollContainer).on('mouseover', handleMouseOver);
      
      var timer = null;
      function throttle(fn, delay) {
        return function() {
          if (!timer) {
            var context = this;
            var args = arguments;
            fn.apply(context, args);
            timer = setTimeout(function() {
              timer = null;
            }, delay);
          }
        }
      }

      function moveNext() {
        if (!stop) {
          var offsetY = tranY;
          if (offsetY + scrollText.offsetHeight < 0) {
            offsetY = scrollContainer.offsetHeight;
            scrollText.style.transition = "";
          } else if (offsetY - scrollContainer.offsetHeight > 0) {
            offsetY = scrollContainer.offsetHeight;
          } else {
            offsetY -= speed * milliSeconds / 1000;
            if(!scrollText.style.transition) {
            	scrollText.style.transition = "transform " + milliSeconds / 1000 + "s linear";
            }
          }
          tranY = offsetY;
          scrollText.style.transform = `translateY(${offsetY}px)`;
          setTimeout(moveNext, milliSeconds);
        }
      }
      // 使用节流函数包装 moveNext 函数
      var moveNextThrottled = throttle(moveNext, milliSeconds);

      moveNextThrottled();

    </script>

  </body>

</html>