js实现表格滚动

实现表格滚动的方法

使用JavaScript实现表格滚动可以通过多种方式完成，以下是几种常见的方法：

固定表头滚动内容

通过CSS设置表格容器的固定高度和溢出滚动，同时保持表头固定：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <!-- 表格内容 -->
    </tbody>
  </table>
</div>

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

使用CSS sticky定位表头

thead th {
  position: sticky;
  top: 0;
  background: white;
}

JavaScript实现同步滚动

当有多个需要同步滚动的表格时：

const tables = document.querySelectorAll('.sync-scroll');
tables.forEach(table => {
  table.addEventListener('scroll', function() {
    tables.forEach(t => {
      if(t !== table) {
        t.scrollLeft = table.scrollLeft;
      }
    });
  });
});

虚拟滚动优化性能

对于大型数据集，使用虚拟滚动技术只渲染可见区域的行：

class VirtualScrollTable {
  constructor(container, rowHeight, visibleRows) {
    this.container = container;
    this.rowHeight = rowHeight;
    this.visibleRows = visibleRows;
    this.data = [];
    this.startIndex = 0;

    this.init();
  }

  init() {
    this.container.style.height = `${this.visibleRows * this.rowHeight}px`;
    this.container.addEventListener('scroll', this.handleScroll.bind(this));
    this.render();
  }

  handleScroll() {
    this.startIndex = Math.floor(this.container.scrollTop / this.rowHeight);
    this.render();
  }

  render() {
    // 只渲染可见行
  }
}

平滑滚动动画

为滚动添加动画效果：

function smoothScroll(element, target, duration) {
  const start = element.scrollTop;
  const change = target - start;
  const startTime = performance.now();

  function animateScroll(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    element.scrollTop = start + change * progress;

    if (progress < 1) {
      requestAnimationFrame(animateScroll);
    }
  }

  requestAnimationFrame(animateScroll);
}

响应式表格滚动

根据窗口大小调整表格滚动区域：

function adjustTableHeight() {
  const windowHeight = window.innerHeight;
  const headerHeight = document.querySelector('header').offsetHeight;
  const tableHeight = windowHeight - headerHeight - 50; // 减去其他元素高度

  document.querySelector('.table-container').style.height = `${tableHeight}px`;
}

window.addEventListener('resize', adjustTableHeight);
adjustTableHeight(); // 初始调用

这些方法可以根据具体需求组合使用，创建出满足不同场景需求的表格滚动效果。