前端 - react自动循环滚动列表，鼠标移入可人为滚动列表组件？

Question

DataV-React轮播表鼠标移入是暂停滚动，好像没法改成添加滚动条

Answer 1

非常感谢您的提问，以下是对您所提问题的回答：

要在 React 中实现自动循环滚动的列表，同时添加鼠标移入暂停滚动的功能，可以使用以下代码片段作为参考：

import React, { useState, useEffect } from "react";const ScrollList = ({ items }) => {  const [activeIndex, setActiveIndex] = useState(0);  useEffect(() => {    let timer;    const handleScroll = () => {      if (activeIndex < items.length - 1) {        setActiveIndex(activeIndex + 1);      } else {        setActiveIndex(0);      }    };    timer = setInterval(handleScroll, 2000); // 设置滚动间隔，这里为2秒    return () => clearInterval(timer); // 在组件卸载时清除定时器  }, [activeIndex, items]);  return (    <div      style={{ overflowX: "auto", whiteSpace: "nowrap", animation: "none" }}      onMouseEnter={() => {        clearInterval(timer); // 鼠标移入暂停滚动      }}      onMouseLeave={() => {        timer = setInterval(handleScroll, 2000); // 鼠标移出恢复滚动      }}    >      {items.map((item, index) => (        <div key={index} style={{ width: "200px", marginRight: "10px" }}>          {item}        </div>      ))}    </div>  );};export default ScrollList;

这个组件将会实现如下功能：每2秒钟，列表会从右向左滚动，当鼠标移入时，滚动会暂停，当鼠标移出时，滚动会恢复。注意这里我们假设items数组中的元素是字符串，如果元素是其他类型的，您需要根据实际情况调整代码。