网站带图文的无限滚动跑马灯出现内容截断问题求助

问题根源 #

• 类名不匹配：HTML中内容容器类为line-block，SASS中误写为.line__block，宽度规则未生效
• 滚动容器使用justify-content: space-between会生成不定间距，导致首尾内容衔接错位
• 内容块未设置不收缩规则，不同屏幕宽度下宽度会被挤压，破坏滚动长度的一致性
• 子元素选择器范围过大，样式影响到内部的内容容器，导致布局异常

修改后代码 #

HTML代码 #

确保最外层包裹.line-infinite容器即可，原有内部结构无需调整：

<!-- 补上最外层容器 -->
<div class="line-infinite">
  <div class="line-block">
    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>
    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>
    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>
  </div>
  <div class="line-block">
    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>
    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>
    <div class="line__wrapper">
      <p class="line__text">Marketplace <br> Leader</p>
      <img src="images/general/logo.svg" alt="logo" class="line__img">
    </div>
  </div>
</div>

SASS代码 #

.line-infinite
  margin: 30px auto
  padding: 30px 0px
  border-top: 1px solid #fff
  border-bottom: 1px solid #fff
  overflow: hidden
  display: flex
  animation: runline 5s linear infinite
  // 仅选中直接子元素，避免影响内部容器
  >.line-block
    width: 100%
    display: flex
    flex-shrink: 0

.line__wrapper
  // 取消百分比宽度限制，内容自适应宽度且不收缩
  flex-shrink: 0
  display: flex
  align-items: center
  // 统一设置内容间距，避免间隙不一致
  margin: 0 50px
  gap: 50px

.line__text
  font-size: 32px
  line-height: 36px
  text-align: center
  margin: 0

.line__img
  width: 200px
  flex-shrink: 0

@keyframes runline
  0%
    transform: translateX(0%)
  100%
    transform: translateX(-100%)

效果说明 #

修改后两份完全一致的滚动内容首尾相接，动画平移到-100%时刚好第一份内容完全移出视口，第二份内容刚好对齐起始位置，循环时不会出现截断或者跳变的问题。如果需要调整滚动速度，直接修改动画的时长数值即可，数值越大滚动速度越慢。

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