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

【问题标题】：How to infinitely scroll horizontal text with Javascript?如何使用Javascript无限滚动水平文本？
【发布时间】：2021-06-08 17:19:14
【问题描述】：

我想在一个框内水平无限滚动歌曲的标题。我重复了歌曲的标题并隐藏了溢出，所以它给人一种无限滚动的错觉，但结果真的很不稳定。

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

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

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

【问题讨论】：

看，请 - codepen.io/Jaskaranbir/pen/JKNgrb 和 codepen.io/Knovour/pen/boJNPN
如果您的文本不够长，无法填满容器，您希望发生什么？

标签： javascript html css text scroll

【解决方案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>

【讨论】：

【解决方案2】：

<marquee> html 标签可以解决问题！

这是文档：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

编辑：对于那些抱怨弃用的人，然后在 CSS 中实现它。到目前为止，唯一放弃对 marquee 支持的是 firefox，现在它在大多数浏览器上都能做到这一点，那么为什么要重新发明轮子呢？

<html>

<body>
    <style style="text/css">
        .marquee {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
        .marquee p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
    </style>

    <div class="marquee">
        <p> Marquee in CSS </p>
    </div>
</body>

</html>

https://www.w3schools.in/css3/css-marquee/

【讨论】：

不推荐使用 html 的此功能。以后不应该使用它。
为什么建议使用已弃用多年的 html 功能？
这些年它们还能正常工作吗？是的，除了Firefox之外的所有东西。反正谁用火狐。因此，虽然它已被弃用，但您可能不在乎。这就是为什么我建议它。您可以使用 marquee 标签，而不是编写 100 行 css，直到它不再被您选择的浏览器支持。谁知道申请是干什么用的，建议就是建议