js实现表格滚动

实现表格滚动的基本方法

使用CSS的overflow属性配合固定高度，可以快速实现表格滚动效果。为表格外层容器设置固定高度和overflow-y: auto，表格内容超出时会自动出现滚动条。

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

.table-container {
  height: 300px;
  overflow-y: auto;
}

固定表头滚动表格体

通过分离表头(thead)和表体(tbody)，结合CSS的position: sticky实现固定表头效果。

<div class="scroll-table">
  <table>
    <thead>
      <tr><th>Header1</th><th>Header2</th></tr>
    </thead>
    <tbody>
      <!-- 大量行数据 -->
    </tbody>
  </table>
</div>

.scroll-table {
  height: 400px;
  overflow-y: auto;
}
thead th {
  position: sticky;
  top: 0;
  background: white;
}

使用JavaScript增强滚动体验

通过监听scroll事件，可以实现动态加载数据等高级功能。

const tableBody = document.querySelector('.scroll-table tbody');
let isLoading = false;

tableBody.addEventListener('scroll', function() {
  if(!isLoading && this.scrollTop + this.clientHeight >= this.scrollHeight - 50) {
    isLoading = true;
    // 加载更多数据
    loadMoreData().then(() => {
      isLoading = false;
    });
  }
});

async function loadMoreData() {
  // 获取数据并添加到表格的逻辑
}

虚拟滚动优化性能

对于超大型表格，使用虚拟滚动技术只渲染可见区域的行。

class VirtualScrollTable {
  constructor(table, rowHeight = 50) {
    this.table = table;
    this.rowHeight = rowHeight;
    this.visibleRows = Math.ceil(table.clientHeight / rowHeight);
    this.startIndex = 0;

    this.tbody = table.querySelector('tbody');
    this.placeholder = document.createElement('div');
    this.placeholder.style.height = `${this.totalRows * rowHeight}px`;
    this.tbody.appendChild(this.placeholder);

    this.renderVisibleRows();
    table.addEventListener('scroll', this.handleScroll.bind(this));
  }

  handleScroll() {
    const scrollTop = this.table.scrollTop;
    this.startIndex = Math.floor(scrollTop / this.rowHeight);
    this.renderVisibleRows();
  }

  renderVisibleRows() {
    // 根据startIndex和visibleRows渲染可见行
  }
}

响应式表格滚动

结合媒体查询实现不同屏幕尺寸下的滚动优化。

@media (max-width: 768px) {
  .table-container {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}

平滑滚动效果

添加CSS过渡效果使滚动更平滑。

.table-container {
  scroll-behavior: smooth;
}