如何实现无间隙的连续Logo滚动效果？

问题描述 #

开发的Logo滚动轮播组件，最后一个Logo与重复出现的第一个Logo之间存在明显间隙，无法实现无缝滚动。

解决方案 #

要实现无缝滚动，核心是让轮播容器内的内容重复一份，确保动画循环时视觉上无断点，同时调整相关样式和逻辑：

1. 修改HTML结构 #

在.logo-scroller__row内部，复制所有.logo-scroller__item元素，让容器内拥有两组完全相同的Logo列表：

<div class="logo-scroller-wrap">
  <div class="logo-scroller1" data-paused="false">
    <div class="logo-scroller__row">
      <!-- 原有的19个Logo item -->
      <div class="logo-scroller__item">
        <div class="logo-scroller__logo">
          <img src="https://dynamikinfluence.com/staging/wp-content/uploads/2023/12/Our-Work-Logos_Xbox-1.svg" alt="" />
        </div>
      </div>
      <!-- ... 省略其他原有的item ... -->
      <div class="logo-scroller__item">
        <div class="logo-scroller__logo">
          <img src="https://dynamikinfluence.com/staging/wp-content/uploads/2023/12/Our-Work-Logos_GM-1.svg" alt="" />
        </div>
      </div>

      <!-- 复制一份所有item，实现无缝衔接 -->
      <div class="logo-scroller__item">
        <div class="logo-scroller__logo">
          <img src="https://dynamikinfluence.com/staging/wp-content/uploads/2023/12/Our-Work-Logos_Xbox-1.svg" alt="" />
        </div>
      </div>
      <!-- ... 省略其他复制的item ... -->
      <div class="logo-scroller__item">
        <div class="logo-scroller__logo">
          <img src="https://dynamikinfluence.com/staging/wp-content/uploads/2023/12/Our-Work-Logos_GM-1.svg" alt="" />
        </div>
      </div>
    </div>
  </div>
</div>

2. 调整CSS样式 #

移除.logo-scroller__row的固定宽度，让它自适应内容宽度，避免复制后内容溢出或显示异常：

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

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

.logo-scroller-wrap{
  overflow: hidden;
}

.logo-scroller1 .logo-scroller__row {
    display: flex;
    margin: 24px 0;
    height: 132px;
    animation-name: infiniteLogoScrollLeft;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-duration: 90s;
    position: relative;
    overflow: hidden;
    /* 移除固定宽度，让容器自适应内容 */
    /* width: 4940px; */
    margin: 0 auto;
}

.logo-scroller1 .logo-scroller__item {
    box-sizing: border-box;
    padding: 0 5px;
}

.logo-scroller__logo {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 123px;
    padding: 15px 25px;
}

3. 优化JavaScript逻辑 #

原JS代码给每个item单独设置动画延迟，会和容器的整体滚动动画冲突，导致间隙问题。移除这部分逻辑，让容器的整体动画控制滚动：

// 移除原有的item动画延迟逻辑，若需要暂停功能可保留如下可选代码
let logoScroller1 = document.querySelector('.logo-scroller1');
// logoScroller1.addEventListener('mouseenter', () => {
//   logoScroller1.querySelector('.logo-scroller__row').style.animationPlayState = 'paused';
// });
// logoScroller1.addEventListener('mouseleave', () => {
//   logoScroller1.querySelector('.logo-scroller__row').style.animationPlayState = 'running';
// });

原理说明 #

当容器内有两组相同的Logo列表时，动画将整个容器向左平移100%（第一组Logo完全移出视野），此时第二组Logo刚好完全进入视野。由于两组内容完全一致，动画循环时，第二组的末尾会和第一组的开头无缝衔接，视觉上就不会出现间隙。

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