React中三个横向滚动盒子左移时避免被截断的解决方案

我想做一个包含三个从右向左滚动的盒子的React组件，但现在遇到两个问题：

• 大屏幕下，第三个盒子左移时会被截断
• 小屏幕下，只有第一个盒子能看到

试过调整媒体查询，但没效果，怎么让所有盒子都正常显示？

原CSS代码 #

.wrapper {
  overflow: hidden;
}

.container {
  overflow-x: hidden;
  white-space: nowrap;
}

.box {
  display: inline-block;
  height: 100px;
  background-color: #f1f1f1;
  margin-right: 10px;
}

@keyframes slideToLeft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%); 
  }
}

.wrapper.animated .container {
  animation: slideToLeft 30s linear infinite;
}

@media screen and (max-width: 500px) {
  .container {
    font-size: 0; 
  }
  
  .box {
    width: calc(100% - 10px);
  }
}

原React代码 #

import React from "react";
import "./Box.css";

function Box1() {
  const imageData = [
    {
      id: 1,
      text: "one",
    },
    {
      id: 2,
      text: "two",
    },
    {
      id: 3,
      text: "three",
    },
  ];

  return (
    <div class="wrapper animated">
      <div className="container">
        {imageData.map((item) => (
          <div class="box" key={item.id}>
            <p>{item.text}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Box1;

修复方案 #

问题核心是动画位移逻辑和容器布局设置不合理，调整以下几点即可解决：

1. 修正布局与动画位移 #

• 移除.container的overflow-x: hidden，否则盒子滚动到边缘会被截断；
• 用flex布局替代inline-block，避免排版间隙和自动收缩问题；
• 动画终点改为translateX(calc(-100% - 10px))，确保容器完全移出视口，所有盒子都能完整滚动。

2. 修正React属性错误 #

React中元素的类名属性是className，不是class，之前的代码混用会导致部分样式失效。

3. 可选：实现无缝滚动 #

复制一份盒子数据放在容器末尾，避免动画循环时的突兀跳转，提升体验。

修正后的CSS

.wrapper {
  overflow: hidden;
  width: 100%;
}

.container {
  white-space: nowrap;
  display: flex;
}

.box {
  flex-shrink: 0; /* 禁止盒子被压缩 */
  width: 200px; /* 大屏幕固定宽度 */
  height: 100px;
  background-color: #f1f1f1;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes slideToLeft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(calc(-100% - 10px));
  }
}

.wrapper.animated .container {
  animation: slideToLeft 30s linear infinite;
}

@media screen and (max-width: 500px) {
  .box {
    width: calc(100% - 10px); /* 小屏幕占满宽度 */
  }
}

修正后的React代码

import React from "react";
import "./Box.css";

function Box1() {
  const imageData = [
    { id: 1, text: "one" },
    { id: 2, text: "two" },
    { id: 3, text: "three" },
  ];

  // 复制数据实现无缝滚动
  const scrollData = [...imageData, ...imageData];

  return (
    <div className="wrapper animated">
      <div className="container">
        {scrollData.map((item) => (
          <div className="box" key={`${item.id}-${item.text}`}>
            <p>{item.text}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Box1;

效果说明 #

• 大屏幕下三个盒子会完整从右向左滚动，不会出现截断；
• 小屏幕下每个盒子占满宽度，依次滚动显示，不会只停留在第一个；
• 无缝滚动的设置让动画循环更流畅，没有断层感。

内容的提问来源于stack exchange，提问作者Mar Rucz