当前位置：首页 > article >正文

React实现自动滚动表格

article 2025/2/20 22:19:55

在 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; // 每次滚动 1px
      if (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;
}