我会这么做：

• 定义函数isElementInViewport(el)，当元素滚动到视野之外时，该函数将返回false。
• 每隔一段时间，检查第一段是否不可见。如果是这样，将其添加为最后一段。每次这样做时，我们都需要调整滚动偏移量。

您可以在下面看到一个工作片段：

const flavoursContainer = document.getElementById('flavoursContainer');
const flavoursScrollWidth = flavoursContainer.scrollWidth;

window.addEventListener('load', () => {
  self.setInterval(() => {
    const first = document.querySelector('#flavoursContainer p');

   if(!isElementInViewport(first)){
      flavoursContainer.appendChild(first);
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft - first.offsetWidth, 0);
    }
    if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft + 1, 0);
    }
  }, 15);
});

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return rect.right > 0;
}

.container {
  width: 100vw;
  overflow-x: scroll;
  white-space: nowrap;
  background-color: #fff;
  display: flex;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-disabler {
  width: 100vw;
  height: 34.4px;
  position: absolute;
  background-color: rgba(0,0,0 , 0.0001);
}

 ::-webkit-scrollbar {
  display: none;
}

p {
  padding: 8px;
}

<div class="container" id="flavoursContainer">
  <div class="scroll-disabler"></div>
  <p>This is the first News: big news</p>
  <p>This is the second News: big news</p>
  <p>This is the third News: big news</p>
  <p>This is the fourth News: big news</p>
  <p>This is the fifth News: big news</p>
  <p>This is the last News: big news</p>
</div>

我认为这可以通过使用html的marquee标签和一点css来完成。我知道它已经过时了，但是所有主要的浏览器仍然支持它。

.flex{
  display: flex;
  align-items: center;
  gap: 20px;
}

<marquee>
  <div class="flex">
     <p>This is the first News: big news</p>
     <p>This is the second News: big news</p>
     <p>This is the third News: big news</p>
     <p>This is the fourth News: big news</p>
     <p>This is the fifth News: big news</p>
     <p>This is the last News: big news</p>
  </div>
</marquee>

您可以在doc中阅读有关字幕的更多信息