实现箭头图片无间隙垂直无限滚动效果（适配任意屏幕尺寸）

我明白你现在的困扰：箭头滚动时出现讨厌的间隙，而且没法完美适配不同屏幕尺寸，想要实现丝滑无断档的垂直无限滚动对吧？别担心，我来帮你调整代码，分两种方案解决，其中CSS背景图方案最省心，适配性拉满，推荐优先尝试。

问题根源分析 #

你当前的代码里，DOM克隆+单图动画的组合没和容器/图片高度正确配合：

1. 给单个图片设置height:130%会导致图片变形，和克隆的图片衔接不上，出现间隙
2. 动画作用在单个图片而非整体内容，加上scrollTop重置的时机没卡准，滚动衔接时会断档
3. 屏幕尺寸变化时，容器高度改变，但图片的重复逻辑没同步适配，进一步放大间隙问题

方案一：CSS背景图实现无缝滚动（推荐） #

利用CSSbackground-repeat: repeat-y的天然重复特性，不需要克隆DOM，一行动画就能实现完美无缝滚动，完全适配任意屏幕尺寸。

步骤1：修改React JSX

把原来的<img>标签换成一个空div，用背景图替代：

// 替换右侧列的滚动容器部分
<div className="col-span-12 md:col-span-4 flex items-center justify-center overflow-hidden relative h-full">
  <div className="scrolling-image-container w-full h-full"></div>
</div>

步骤2：更新CSS

直接给容器设置背景图、重复规则和滚动动画（注意把1101px换成你图片的实际高度）：

.scrolling-image-container {
  height: 100%;
  /* 核心配置：背景图+垂直重复 */
  background-image: url('../../assets/icons/arrowinfinte.png');
  background-repeat: repeat-y;
  background-size: contain; /* 保持图片原有比例，完整显示箭头 */
  /* 动画：滚动一个图片高度的距离，无限循环 */
  animation: scrollVertically 5s linear infinite;
}

@keyframes scrollVertically {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: 1101px; /* 必须和图片实际高度一致 */
  }
}

为什么这个方案好用？

• 天然无缝：repeat-y会自动重复背景图，滚动一个图片高度后，下一段刚好和顶部衔接
• 适配所有屏幕：不管容器高度是多少，背景都会自动填充重复，绝不会出现间隙
• 代码极简：不需要复杂的DOM操作和事件监听，维护成本极低

方案二：img标签实现无缝滚动（保留img标签需求时用） #

如果你必须用<img>标签展示，那我们调整DOM结构和动画逻辑，让两个图片无缝衔接滚动：

步骤1：修改React JSX

直接在容器里放两个相同的图片（不用再在useEffect里克隆了）：

<div className="col-span-12 md:col-span-4 flex items-center justify-center overflow-hidden relative h-full">
  <div className="scrolling-image-container w-full h-full overflow-hidden">
    <div className="scroll-content">
      <img src={infinteArrows} alt="Infinite Arrows" className="scrolling-image" />
      <img src={infinteArrows} alt="Infinite Arrows" className="scrolling-image" />
    </div>
  </div>
</div>

步骤2：更新CSS

让动画作用在包含两张图片的容器上，滚动距离刚好是单个图片的高度：

.scrolling-image-container {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  display: flex;
  flex-direction: column;
  /* 动画：滚动整个内容区，距离为单个图片高度 */
  animation: scrollVertically 5s linear infinite;
}

.scrolling-image {
  flex-shrink: 0;
  width: 100%;
  height: auto; /* 保持图片原有比例 */
  /* 若要让图片填满容器高度，可替换为：
  height: 100%;
  object-fit: contain;
  */
}

@keyframes scrollVertically {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%); /* 滚动距离=单个图片高度，两张图刚好衔接 */
  }
}

优化React逻辑

记得把原来useEffect里的DOM克隆、事件监听代码删掉，现在不需要啦！

额外适配技巧 #

1. 如果需要调整滚动速度，直接修改动画的5s参数（数值越小速度越快）
2. 若要让图片填满容器高度，把background-size: contain换成cover（背景图方案），或给img设置height:100%; object-fit: cover（img方案）
3. 屏幕尺寸变化时，两种方案都会自动适配，不需要额外监听窗口resize事件

备注：内容来源于stack exchange，提问作者Econs