如何用Javascript无限滚动水平文本？

Question

我想在框中水平无限滚动歌曲的标题。我重复了歌曲的标题并隐藏了溢出部分，这样它给人一种无限滚动的错觉，但结果确实很不稳定。

它应该像在汽车仪表板上一样，如果该区域无法容纳整个文本，则歌曲标题/艺术家会循环播放。

[Codepen](https://codepen.io/safiajeff/pen/MWJQOPv)

我怎样才能让它更平滑/无限？

Answer 1

鉴于您已经有标题的两个副本，您可以使用 CSS 而不是 JS 来滚动。

这两个标题一个接一个地位于同一行。如果您将其容器向左变换 50%，则第二个版本将位于左侧：0。然后第一个版本立即转到相同的位置，并且您看不到任何抖动。

这不仅相当简单，只需添加 CSS 关键帧定义而无需 JS，而且它对 CPU 和 GPU 的使用也更轻，从而节省用户的电池。

section{
  overflow :hidden;
  width: 150px;
  display:inline-block;
  border: 1px solid red;
  height: 50px;
  white-space: nowrap;
}

div{
  width: 566px;
  display: flex;
  flex-wrap: nowrap;
  animation: move 2s infinite linear; /* set the time to what you want of course */
}
@keyframes move {
  to {
    transform: translateX(-50%);
  }
}
h1{
  font-size: 20px;
  margin:0;
  padding-left:0px;
  border: 1px solid blue;
  width:283px;
}

<section>
  <div id="container">
    <h1>Simon Dominic - At Night</h1>
    <h1>Simon Dominic - At Night</h1>
  </div>
</section>