html 原生js 写一个表格自动滚动 鼠标放在表格上 就停止 鼠标移开 就又开始滚动 

<div id="myDiv" style="height: 200px; overflow: auto;">
  <table>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
      </tr>
      
         <tr>
        <td>Row 3, Column 1</td>
        <td>Row 3, Column 2</td>
      </tr>
         <tr>
        <td>Row 4, Column 1</td>
        <td>Row 4, Column 2</td>
      </tr>
         <tr>
        <td>Row 5, Column 1</td>
        <td>Row 5, Column 2</td>
      </tr>
         <tr>
        <td>Row 6, Column 1</td>
        <td>Row 6, Column 2</td>
      </tr>
         <tr>
        <td>Row 7, Column 1</td>
        <td>Row 7, Column 2</td>
      </tr>
         <tr>
        <td>Row 8, Column 1</td>
        <td>Row 8, Column 2</td>
      </tr>
         <tr>
        <td>Row 9, Column 1</td>
        <td>Row 9, Column 2</td>
      </tr>
         <tr>
        <td>Row 10, Column 1</td>
        <td>Row 10, Column 2</td>
      </tr>
         <tr>
        <td>Row 11, Column 1</td>
        <td>Row 11, Column 2</td>
      </tr>
      <!-- ... -->
    </tbody>
  </table>
</div>
<style>
.table-container {
  height: 200px;
  overflow: hidden;
}
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  padding: 10px;
  border: 1px solid #ccc;
}
tr:nth-child(2n) {
  background-color: #f9f9f9;
}
tr:hover {
  background-color: #eee;
}
</style>
<script>
var div = document.getElementById("myDiv");
var scrollInterval;
function startScroll() {
  scrollInterval = setInterval(function() {
    var table = div.querySelector("table");
    var firstRow = table.rows[0];
    var newRow = firstRow.cloneNode(true);
    table.appendChild(newRow);
    table.deleteRow(0);
  }, 2000);
}
function stopScroll() {
  clearInterval(scrollInterval);
}
startScroll();
div.addEventListener("mouseenter", function() {
  stopScroll();
});
div.addEventListener("mouseleave", function() {
  startScroll();
});
</script>