Js实现文字水平滚动

现在要实现的效果是，当一行文字超过页面的宽度，需要实现循环轮播的效果。

我们需要实现无缝轮播，所以需要在DOM里面多添加一条，当第一条内容刚好结束的时候也就是第二条开始的时候，此时瞬间切换到第一条的开始位置。这样就可以无缝衔接了。

<div id="scroll-outer" class="scroll__outer">
  <div id="scroll-inner" class="scroll__inner">
    <div class="scroll__text">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
    <div class="scroll__text" id="last-text">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
  </div>
</div>

样式上我们需要注意，第一就是文字不能换行，第二就是两行文字需要排列在一起。

<style>
  .scroll__outer {
    position: relative;
    flex: 1;
    overflow: hidden;
    color: #000;
    width: 100%;
    height: 36px;
  }


  .scroll__inner {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate3d(0, 0, 0);
    display: flex;
    flex-direction: row;
  }


  .scroll__text {
    padding-right: 20px;
    white-space: nowrap;
  }
</style>

JS脚本通过获取元素的宽度，然后判断是否超出了页面的宽度，如果超过就开启一个定时器，然后每次间隔一段时间重新设置文字的偏移距离。

<script>
  const outer = document.getElementById('scroll-outer')
  const innter = document.getElementById('scroll-inner')
  const outerWidth = outer.getBoundingClientRect().width
  const innerWidth = innter.getBoundingClientRect().width
  const lastText = document.getElementById('last-text')
  const padding = 20
  const middle = innerWidth / 2
  let translate = 0
  if (middle - padding > outerWidth) {
    setInterval(() => {
      translate = translate >= middle ? 2 : (translate + 2)
      innter.style.transform = `translate3d(${-translate}px, 0, 0)`
    }, 100)
  } else {
    lastText.style.display = 'none'
  }
</script>