在 React 中实现一个自动滚动的表格，可以通过 CSS 动画和 JavaScript 定时器来实现。以下是一个完整的示例代码，包含示例数据和自动滚动功能。

实现思路：

• ** 自动滚动：**

使用 setInterval 实现表格的自动滚动。

• 手动滚动：

监听表格的 scroll 事件，当用户手动滚动时，暂停自动滚动。

使用 setTimeout 检测用户是否停止滚动，如果停止滚动一段时间（例如 2 秒），则恢复自动滚动。

• 鼠标悬停
  鼠标悬停时停止滚动，鼠标移开后继续滚动

代码

import React, { useState, useEffect, useRef } from "react";
import "../Styles/AutoScrollTable.css"; // 引入样式文件const AutoScrollTable = () => {// 示例数据const [data, setData] = useState([{ id: 1, name: "Alice", age: 25, city: "New York" },{ id: 2, name: "Bob", age: 30, city: "Los Angeles" },{ id: 3, name: "Charlie", age: 35, city: "Chicago" },{ id: 4, name: "David", age: 40, city: "Houston" },{ id: 5, name: "Eva", age: 28, city: "Phoenix" },{ id: 6, name: "Frank", age: 33, city: "Philadelphia" },{ id: 7, name: "Grace", age: 22, city: "San Antonio" },{ id: 8, name: "Hank", age: 45, city: "San Diego" },{ id: 9, name: "Ivy", age: 29, city: "Dallas" },{ id: 10, name: "Jack", age: 31, city: "San Jose" },]);const tableRef = useRef(null); // 用于引用表格容器const scrollIntervalRef = useRef(null); // 存储自动滚动的定时器// 开始自动滚动const startAutoScroll = () => {if (scrollIntervalRef.current) return; // 如果已经有定时器，则不重复启动scrollIntervalRef.current = setInterval(() => {const table = tableRef.current;if (!table) return;const scrollHeight = table.scrollHeight; // 表格总高度const clientHeight = table.clientHeight; // 可视区域高度const maxScroll = scrollHeight - clientHeight; // 最大滚动距离let scrollTop = table.scrollTop + 1; // 每次滚动 1pxif (scrollTop >= maxScroll) {scrollTop = 0; // 滚动到底部后回到顶部}table.scrollTop = scrollTop;}, 50); // 每 50ms 滚动一次};// 停止自动滚动const stopAutoScroll = () => {if (scrollIntervalRef.current) {clearInterval(scrollIntervalRef.current);scrollIntervalRef.current = null;}};// 处理鼠标事件const handleMouseEnter = () => {stopAutoScroll();};const handleMouseLeave = () => {startAutoScroll();};useEffect(() => {const table = tableRef.current;if (!table) return;// 初始化自动滚动startAutoScroll();// 监听鼠标事件table.addEventListener("mouseenter", handleMouseEnter);table.addEventListener("mouseleave", handleMouseLeave);// 清除事件监听和定时器return () => {table.removeEventListener("mouseenter", handleMouseEnter);table.removeEventListener("mouseleave", handleMouseLeave);stopAutoScroll();};}, []);return (<div className="table-container"><h2>自动滚动表格（鼠标悬停时停止滚动）</h2><div className="scrollable-table" ref={tableRef}><table style={{ borderCollapse: 'collapse', width: '100%', border: '1px solid black' }}><thead><tr><th style={{ border: '1px solid black', padding: '8px' }}>ID</th><th style={{ border: '1px solid black', padding: '8px' }}>Name</th><th style={{ border: '1px solid black', padding: '8px' }}>Age</th><th style={{ border: '1px solid black', padding: '8px' }}>City</th></tr></thead><tbody>{data.map((item) => (<tr key={item.id} style={{ borderBottom: '1px solid black' }}><td style={{ border: '1px solid black', padding: '8px' }}>{item.id}</td><td style={{ border: '1px solid black', padding: '8px' }}>{item.name}</td><td style={{ border: '1px solid black', padding: '8px' }}>{item.age}</td><td style={{ border: '1px solid black', padding: '8px' }}>{item.city}</td></tr>))}</tbody></table></div>
</div>);
};export default AutoScrollTable;

样式文件 (AutoScrollTable.css)：

.table-container {margin: 20px;font-family: Arial, sans-serif;
}.scrollable-table {max-height: 300px; /* 设置表格的最大高度 */overflow-y: auto; /* 允许垂直滚动 */border: 1px solid #ccc; /* 表格边框 */border-radius: 4px; /* 圆角 */box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}table {width: 100%;border-collapse: collapse; /* 单元格合并边框 */
}th, td {border: 1px solid #ddd; /* 单元格边框 */padding: 12px; /* 单元格内边距 */text-align: left; /* 左对齐 */
}th {background-color: #f4f4f4; /* 表头背景颜色 */font-weight: bold; /* 加粗字体 */
}tr:nth-child(even) {background-color: #f9f9f9; /* 偶数行背景色 */
}tr:hover {background-color: #f1f1f1; /* 鼠标悬停行的背景色 */
}.table-container {width: 95%;padding: 20px;box-sizing: border-box;
}.scrollable-table {overflow: auto;height: 300px; /* 设置表格容器的高度以实现滚动效果 */border: 1px solid #ccc;border-radius: 5px;
}table {width: 100%;border-collapse: collapse;
}thead {position: sticky;top: 0;background-color: #f8f8f8;
}th, td {border: 1px solid #ddd;padding: 8px;text-align: left;
}th {background-color: #5179be;color: white;
}tbody tr:nth-child(even) {background-color: #f2f2f2;
}tbody tr:hover {background-color: #ddd;
}

效果图：