Ant Design Table组件滚动条控制：实现左右滚动悬浮按钮

完全可以实现这个需求，核心思路是通过操作Table滚动容器的scrollLeft属性控制水平滚动，配合悬浮按钮触发滚动逻辑即可，具体实现步骤如下：

1. 确保Table开启水平滚动 #

先给Table配置水平滚动，通过scroll.x设置一个大于列总宽度的数值：

<Table
  scroll={{ x: 1800 }} // 根据实际列宽调整数值
  columns={yourColumns}
  dataSource={yourDataSource}
/>

2. 获取Table的滚动容器 #

Ant Design Table的水平滚动容器DOM类名为.ant-table-body，可以通过useRef结合useEffect获取容器引用：

import { useRef, useEffect } from 'react';

const scrollContainerRef = useRef(null);

useEffect(() => {
  const tableScrollContainer = document.querySelector('.ant-table-body');
  if (tableScrollContainer) {
    scrollContainerRef.current = tableScrollContainer;
  }
}, []);

3. 编写滚动控制函数 #

实现两个点击事件处理函数，分别控制容器向左、向右滚动，滚动距离可根据需求调整：

const scrollToLeft = () => {
  if (scrollContainerRef.current) {
    scrollContainerRef.current.scrollLeft -= 300; // 每次向左滚动300px
  }
};

const scrollToRight = () => {
  if (scrollContainerRef.current) {
    scrollContainerRef.current.scrollLeft += 300; // 每次向右滚动300px
  }
};

4. 添加悬浮滚动按钮 #

用容器包裹Table和按钮，通过绝对定位让按钮悬浮在Table两侧，设置z-index保证按钮在Table上方：

import { Button } from 'antd';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';

<div style={{ position: 'relative', width: '100%' }}>
  {/* 左滚动按钮 */}
  <Button
    onClick={scrollToLeft}
    icon={<LeftOutlined />}
    style={{
      position: 'absolute',
      left: 16,
      top: '50%',
      transform: 'translateY(-50%)',
      zIndex: 10,
      backgroundColor: '#fff'
    }}
  />
  {/* Table组件 */}
  <Table
    scroll={{ x: 1800 }}
    columns={yourColumns}
    dataSource={yourDataSource}
  />
  {/* 右滚动按钮 */}
  <Button
    onClick={scrollToRight}
    icon={<RightOutlined />}
    style={{
      position: 'absolute',
      right: 16,
      top: '50%',
      transform: 'translateY(-50%)',
      zIndex: 10,
      backgroundColor: '#fff'
    }}
  />
</div>

5. 优化体验：根据滚动状态禁用按钮 #

监听容器滚动事件，根据当前滚动位置判断是否禁用按钮，避免无效点击：

import { useState } from 'react';

const [leftBtnDisabled, setLeftBtnDisabled] = useState(true);
const [rightBtnDisabled, setRightBtnDisabled] = useState(false);

useEffect(() => {
  const handleScroll = () => {
    if (!scrollContainerRef.current) return;
    const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
    setLeftBtnDisabled(scrollLeft === 0);
    // 减1避免精度误差，确保滚动到最右侧时禁用按钮
    setRightBtnDisabled(scrollLeft >= scrollWidth - clientWidth - 1);
  };

  const container = scrollContainerRef.current;
  if (container) {
    container.addEventListener('scroll', handleScroll);
    handleScroll(); // 初始化按钮状态
    return () => container.removeEventListener('scroll', handleScroll);
  }
}, []);

// 给按钮添加disabled属性
<Button onClick={scrollToLeft} disabled={leftBtnDisabled} />
<Button onClick={scrollToRight} disabled={rightBtnDisabled} />

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