js表格添加滚动 设置表头不滚动

要在 JavaScript 中为表格添加滚动，并使表头保持固定而不滚动，可以使用 CSS 和 JavaScript 来实现。

首先，您需要将表格的表头行（通常是 `<thead>` 元素）从表格中分离出来，并将其放置在一个独立的元素中。这个元素将作为固定的表头。

HTML：

<div class="table-container">
  <table>
    <thead>
      <!-- 表头内容 -->
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

CSS：

.table-container {
  max-height: 300px; /* 设置容器的最大高度 */
  overflow: auto; /* 添加滚动条 */
}

.table-container thead {
  position: sticky;
  top: 0; /* 将表头固定在容器顶部 */
  background-color: #f1f1f1; /* 设置表头背景色 */
}

在上面的示例中，我们使用 CSS 的 `position: sticky` 属性将表头固定在容器的顶部，并使用 `top: 0` 将其粘附在顶部位置。通过设置 `background-color` 属性，您可以给表头添加背景颜色以突出显示。

然后，您可以使用 JavaScript 来监听容器的滚动事件，并根据滚动位置来控制表头的可见性。当容器滚动时，将表头的可见性设置为隐藏或显示。

JavaScript：

var tableContainer = document.querySelector('.table-container');
var tableHeader = document.querySelector('.table-container thead');

tableContainer.addEventListener('scroll', function() {
  if (tableContainer.scrollTop > 0) {
    tableHeader.style.display = 'none'; // 滚动时隐藏表头
  } else {
    tableHeader.style.display = 'table-header-group'; // 滚动回顶部时显示表头
  }
});

在上面的代码中，我们使用 `querySelector` 方法获取表格容器和表头元素，并为容器添加滚动事件监听器。根据容器的滚动位置，我们使用 `style.display` 属性来控制表头的显示或隐藏。

通过以上代码，您可以为表格添加滚动，并使表头保持固定而不滚动。请注意，上述示例可能需要根据您的具体需求进行调整，以适应您的表格结构和样式。