快捷導(dǎo)航

React實現(xiàn)自動滾動表格的方法實例

更新時間：2025年09月12日 11:38:29 作者：苦茶折柳

React中實現(xiàn)一個自動滾動的表格,結(jié)合CSS動畫與JavaScript定時器,支持手動暫停、恢復(fù)及懸?？刂?具有一定的參考價值,感興趣的可以了解一下

代碼

import React, { useState, useEffect, useRef } from "react";
import "../Styles/AutoScrollTable.css"; // 引入樣式文件

const AutoScrollTable = () => {
  // 示例數(shù)據(jù)
  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; // 如果已經(jīng)有定時器，則不重復(fù)啟動
 
    scrollIntervalRef.current = setInterval(() => {
      const table = tableRef.current;
      if (!table) return;
 
      const scrollHeight = table.scrollHeight; // 表格總高度
      const clientHeight = table.clientHeight; // 可視區(qū)域高度
      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;
    }
  };
 
  // 處理鼠標(biāo)事件
  const handleMouseEnter = () => {
    stopAutoScroll();
  };
 
  const handleMouseLeave = () => {
    startAutoScroll();
  };
 
  useEffect(() => {
    const table = tableRef.current;
    if (!table) return;
 
    // 初始化自動滾動
    startAutoScroll();
 
    // 監(jiān)聽鼠標(biāo)事件
    table.addEventListener("mouseenter", handleMouseEnter);
    table.addEventListener("mouseleave", handleMouseLeave);
 
    // 清除事件監(jiān)聽和定時器
    return () => {
      table.removeEventListener("mouseenter", handleMouseEnter);
      table.removeEventListener("mouseleave", handleMouseLeave);
      stopAutoScroll();
    };
  }, []);
 
  return (
    <div className="table-container">
  <h2>自動滾動表格（鼠標(biāo)懸停時停止?jié)L動）</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; /* 設(shè)置表格的最大高度 */
  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; /* 單元格內(nèi)邊距 */
  text-align: left; /* 左對齊 */
}

th {
  background-color: #f4f4f4; /* 表頭背景顏色 */
  font-weight: bold; /* 加粗字體 */
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* 偶數(shù)行背景色 */
}

tr:hover {
  background-color: #f1f1f1; /* 鼠標(biāo)懸停行的背景色 */
}

.table-container {
  width: 95%;
  padding: 20px;
  box-sizing: border-box;
}

.scrollable-table {
  overflow: auto;
  height: 300px; /* 設(shè)置表格容器的高度以實現(xiàn)滾動效果 */
  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;
}