React实现无点击自动横向滚动的问题求助

你当前的实现问题在于每个卡片单独通过transform移动，且重置位置用了硬编码值，导致滚动衔接不自然；同时没有利用容器整体滚动的逻辑，增加了复杂度。下面提供两种可复用的最优方案，分别适用于不同场景。

方案一：纯CSS实现（推荐，性能最优） #

纯CSS动画无需JS介入，性能更好，代码更简洁，适合无复杂交互的自动滚动场景。核心思路是通过复制一份卡片，配合CSS关键帧动画实现无缝滚动。

代码实现 #

CSS样式

/* 外层容器：隐藏溢出内容 */
.card-scroll-container {
  display: flex;
  overflow: hidden;
  width: 100%;
}

/* 滚动容器：包含双倍卡片，实现无缝衔接 */
.card-scroll-wrapper {
  display: flex;
  flex-wrap: nowrap;
  /* 动画：20秒线性无限滚动，可根据需求调整时长 */
  animation: horizontal-scroll 20s linear infinite;
}

/* 可选：鼠标悬停时暂停滚动 */
.card-scroll-wrapper:hover {
  animation-play-state: paused;
}

/* 卡片样式：固定宽度，禁止收缩 */
.country-card {
  flex-shrink: 0;
  width: 200px;
  margin: 0 8px;
}

/* 滚动关键帧：从初始位置移动到自身宽度的-100% */
@keyframes horizontal-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

React组件

function CountryCardScroll({ countries }) {
  // 复制一份卡片，实现滚动到末尾时无缝衔接
  const scrollItems = [...countries, ...countries];

  return (
    <div className="card-scroll-container">
      <div className="card-scroll-wrapper">
        {scrollItems.map((country, idx) => (
          <div 
            key={`country-${country.Name}-${idx}`}
            className="country-card card m-2 pt-2"
          >
            <div className="py-1">
              <div className="fs-5 mt-2">{country.Name}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

方案二：React Hooks实现（灵活可控） #

如果需要动态调整滚动速度、添加暂停/继续逻辑，或结合其他React状态，推荐使用Hooks封装可复用的滚动逻辑。核心思路是操作容器的scrollLeft属性，配合requestAnimationFrame实现平滑滚动。

代码实现 #

封装可复用Hook

import { useRef, useEffect } from 'react';

/**
 * 自动横向滚动Hook
 * @param {number} speed - 滚动速度（px/帧），默认2
 * @returns {React.RefObject} 容器引用
 */
export const useAutoHorizontalScroll = (speed = 2) => {
  const containerRef = useRef(null);
  const animationIdRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const animateScroll = () => {
      // 累计滚动距离
      container.scrollLeft += speed;
      // 滚动到一半时重置，实现无缝衔接（因为复制了双倍卡片）
      if (container.scrollLeft >= container.scrollWidth / 2) {
        container.scrollLeft = 0;
      }
      animationIdRef.current = requestAnimationFrame(animateScroll);
    };

    // 启动动画
    animationIdRef.current = requestAnimationFrame(animateScroll);

    // 清理函数：取消动画
    return () => {
      if (animationIdRef.current) {
        cancelAnimationFrame(animationIdRef.current);
      }
    };
  }, [speed]);

  return containerRef;
};

使用Hook的组件

import { useAutoHorizontalScroll } from './hooks';

function CountryCardScroll({ countries }) {
  // 自定义滚动速度为3px/帧
  const containerRef = useAutoHorizontalScroll(3);
  const scrollItems = [...countries, ...countries];

  return (
    <div
      ref={containerRef}
      style={{
        display: 'flex',
        overflow: 'hidden',
        width: '100%',
        scrollBehavior: 'auto' // 禁用平滑滚动，避免卡顿
      }}
    >
      {scrollItems.map((country, idx) => (
        <div
          key={`country-${country.Name}-${idx}`}
          style={{ flexShrink: 0, width: '200px' }}
          className="card m-2 pt-2"
        >
          <div className="py-1">
            <div className="fs-5 mt-2">{country.Name}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

方案选择建议 #

• 纯CSS方案：优先选择，适合静态自动滚动场景，代码简洁、性能优异，无需维护JS逻辑。
• React Hooks方案：适合需要动态控制滚动（如速度调整、暂停/继续、响应式适配）的场景，复用性强，可灵活扩展功能。

内容的提问来源于stack exchange，提问作者manish thakur