React Table 如何在表头上方添加顶部水平滚动条实现上下双滚动条？

核心思路 #

现有表格已经配置了底部水平滚动，当列数较多、横向内容溢出时，用户需要滚动到表格底部才能拖动横向滚动条，操作路径过长。通过在表头上方增设独立滚动容器，绑定双向滚动同步逻辑，即可实现上下两个滚动条操作完全一致的效果。

适配现有代码的改造步骤 #

• 调整DOM结构：在原有BTable组件外层套一个统一的包裹容器，在表格上方插入一个高度极小（通常6-10px）的薄滚动容器，通过同宽度的占位元素撑出和表格内容一致的可滚动区域
• 绑定双向滚动事件：分别监听顶部滚动容器、原有表格容器的scroll事件，将各自的scrollLeft值同步到对方元素
• 动态适配宽度：监听窗口大小变化、表格列渲染完成的时机，重新计算表格实际内容宽度，保证顶部滚动区域的可滚动范围和表格完全匹配

改造后的代码示例 #

import { useRef, useEffect, useState } from 'react'

function ProjectTable() {
  const topScrollRef = useRef(null)
  const [tableContentWidth, setTableContentWidth] = useState(0)

  useEffect(() => {
    const tableEl = document.getElementById('project-table')
    
    // 初始化获取表格实际内容宽度
    const updateTableWidth = () => {
      if (tableEl) setTableContentWidth(tableEl.scrollWidth)
    }
    updateTableWidth()

    // 双向滚动同步逻辑
    const handleTopScroll = () => {
      if (topScrollRef.current && tableEl) {
        tableEl.scrollLeft = topScrollRef.current.scrollLeft
      }
    }

    const handleTableScroll = () => {
      if (topScrollRef.current && tableEl) {
        topScrollRef.current.scrollLeft = tableEl.scrollLeft
      }
    }

    // 绑定事件监听
    const topScrollEl = topScrollRef.current
    topScrollEl?.addEventListener('scroll', handleTopScroll)
    tableEl?.addEventListener('scroll', handleTableScroll)
    window.addEventListener('resize', updateTableWidth)

    // 组件卸载时解绑事件
    return () => {
      topScrollEl?.removeEventListener('scroll', handleTopScroll)
      tableEl?.removeEventListener('scroll', handleTableScroll)
      window.removeEventListener('resize', updateTableWidth)
    }
  }, [])

  return (
    <div style={{width: '100%'}}>
      {/* 顶部独立滚动条容器 */}
      <div 
        ref={topScrollRef}
        style={{
          height: 8,
          overflowX: 'auto',
          overflowY: 'hidden'
        }}
      >
        {/* 占位元素撑出与表格一致的滚动宽度 */}
        <div style={{width: tableContentWidth, height: 1}} />
      </div>

      {/* 原有BTable逻辑完全保留，不做改动 */}
      <BTable 
        id="project-table" 
        striped 
        bordered 
        hover 
        size="md" 
        {...getTableProps()} 
        style={{
          overflowX: 'scroll',
          whiteSpace: 'nowrap',
        }}
      >
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps()}>
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {page.map((row, i) => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <td {...cell.getCellProps()}>
                      {cell.render('Cell')}
                    </td>
                  )
                })}
              </tr>
            )
          })}
        </tbody>
      </BTable>
    </div>
  )
}

注意事项 #

• 顶部滚动容器不需要额外美化，使用浏览器原生滚动条样式即可和底部滚动条视觉保持一致
• 如果表格列是动态加载的，需要在列渲染完成后重新调用宽度计算方法，避免出现顶部滚动条可滚动范围和实际表格不匹配的问题
• 如果BTable组件因为框架封装的原因，自身的overflow样式不生效，就额外在BTable外面套一层div作为滚动容器，把overflowX: 'scroll'的样式挪到这个外层div上，再调整同步逻辑绑定到这个div上即可，整体实现逻辑不变
• 不要移除表格原有的底部滚动条，双向同步后用户无论在页面上方还是下方，都可以直接横向拖动表格，不需要滚动到表格底部操作

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