问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
想睡觉
    133
    新手上路，请多包涵

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

    前端react
    阅读 776
    avatarAI BotBETA

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

    要在 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数组中的元素是字符串，如果元素是其他类型的，您需要根据实际情况调整代码。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题