CSS实现图片循环滚动：移动端滚动条问题及解决方案咨询

我需要实现一张图片从左侧滑入、向右移动，到达右侧端点后再次从左侧滑入的循环滚动效果，目前的代码在桌面端正常，但移动端会出现横向滚动条，影响页面其他绝对定位元素。现有代码如下：

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

.row-1 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.image-container {
  position: absolute;
  top: 4%;
  width: 100vw !important;
  overflow: hidden;
  animation: slideAnimation 18s linear infinite;
}

<div class="row-1">
  <div class="image-container">
    <img class="img" src="/src/assets/image.svg" alt="img">
  </div>
</div>

方法一：给父容器添加相对定位，利用溢出隐藏裁剪滚动内容 #

问题根源是绝对定位的.image-container没有被父容器的overflow:hidden约束——.row-1默认是position:static，无法作为绝对定位元素的定位参考。只需给.row-1添加position:relative，让它成为.image-container的定位上下文，此时.row-1的overflow:hidden会裁剪超出自身范围的内容，不会触发页面滚动条：

.row-1 {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  position: relative; /* 添加这行 */
}

方法二：全局禁用横向滚动条 #

如果页面本身不需要横向滚动，可以直接给html和body设置overflow-x:hidden，强制隐藏横向滚动条：

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

方法三：调整动画逻辑，避免容器超出视口 #

若图片宽度与视口一致，可修改动画方向，让图片向左移出视口而非容器向右移动，这样容器无需设置100vw宽度，自然不会触发滚动条：

@keyframes slideAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* 改为向左移动 */
  }
}

.image-container {
  position: absolute;
  top: 4%;
  width: auto; /* 去掉100vw，用图片自身宽度 */
  animation: slideAnimation 18s linear infinite;
}

内容的提问来源于stack exchange，提问作者Moin Nawaz