内容过多时实现代课教师信息表格的自动循环滚动

1. 调整HTML结构 #

按照你提到的，将“TODAY”/“TOMORROW”文本移到表格上方，同时给每个子表格拆分<thead>和<tbody>，方便单独控制滚动区域：

<div class="table-container">
  <h3>TODAY</h3>
  <table class="half-width-table">
    <thead>
      <tr>
        <td width="60" class="table_header text_bold">Class</td>
        <td width="20" class="table_header text_bold">Period</td>
        <td width="40" class="table_header text_bold">Teacher</td>
        <td width="40" class="table_header text_bold">Substitute</td>
        <td width="40" class="table_header text_bold">Info</td>
      </tr>
    </thead>
    <tbody class="scroll-content">
      <tr class="white">
        <td>5RS</td><td>2</td><td>RSWI</td><td>LLOR</td><td>Room A41</td>
      </tr>
      <tr class="grey">
        <td>7MC</td><td>5</td><td>TPOR</td><td>NFIE</td><td>Chem, Room S11</td>
      </tr>
      <!-- 更多数据行 -->
    </tbody>
  </table>
</div>

<div class="table-container">
  <h3>TOMORROW</h3>
  <table class="half-width-table">
    <thead>
      <tr>
        <td width="60" class="table_header text_bold">Class</td>
        <td width="20" class="table_header text_bold">Period</td>
        <td width="40" class="table_header text_bold">Teacher</td>
        <td width="40" class="table_header text_bold">Substitute</td>
        <td width="40" class="table_header text_bold">Info</td>
      </tr>
    </thead>
    <tbody class="scroll-content">
      <!-- 次日数据行 -->
    </tbody>
  </table>
</div>

2. CSS样式配置 #

给表格容器设置固定高度，隐藏溢出内容，同时固定表头位置避免随内容滚动：

.table-container {
  width: 50%;
  float: left;
  height: calc(100vh - 60px); /* 减去标题高度，适配窗口高度 */
  overflow: hidden;
}

.half-width-table {
  width: 100%;
  border-collapse: collapse;
}

.half-width-table thead {
  position: sticky;
  top: 0;
  background: #fff; /* 背景色覆盖下方内容，保持表头可见 */
}

.scroll-content {
  display: block;
  height: calc(100vh - 120px); /* 减去表头和容器内边距高度 */
  overflow-y: hidden; /* 由JS控制滚动，隐藏原生滚动条 */
}

.scroll-content tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* 保证列宽一致 */
}

3. JavaScript实现循环滚动逻辑 #

核心逻辑是克隆tbody内容实现无缝衔接，仅当表格内容高度超过窗口高度时启动滚动：

function initAutoScroll() {
  const scrollContents = document.querySelectorAll('.scroll-content');
  
  scrollContents.forEach(content => {
    const tableHeight = content.scrollHeight;
    // 仅当内容高度超过窗口高度时启动滚动
    if (tableHeight <= window.innerHeight) return;
    
    // 克隆内容追加到自身，实现无缝滚动
    const clonedContent = content.cloneNode(true);
    content.appendChild(clonedContent);
    
    let scrollPos = 0;
    const scrollSpeed = 1; // 滚动速度，数值越大越快
    
    const scrollInterval = setInterval(() => {
      scrollPos += scrollSpeed;
      // 当滚动到原始内容末尾时，重置位置实现循环
      if (scrollPos >= tableHeight) {
        scrollPos = 0;
        content.scrollTop = scrollPos;
      } else {
        content.scrollTop = scrollPos;
      }
    }, 30); // 滚动间隔，数值越小越流畅
    
    // 可选：鼠标悬停时暂停滚动
    content.parentElement.addEventListener('mouseenter', () => {
      clearInterval(scrollInterval);
    });
    content.parentElement.addEventListener('mouseleave', () => {
      initAutoScroll(); // 重新启动滚动
    });
  });
}

// 页面加载完成后初始化
window.addEventListener('load', initAutoScroll);
// 窗口大小改变时重新检测
window.addEventListener('resize', initAutoScroll);

说明 #

• 滚动速度和间隔可以通过scrollSpeed和setInterval的第二个参数调整
• 鼠标悬停暂停滚动是可选功能，可根据需求移除
• 窗口大小改变时会重新检测内容高度，自动调整滚动状态

内容的提问来源于stack exchange，提问作者Daniello