Javascript：平滑重复自动水平滚动

Question

我有一个简单的代码可以自动水平滚动段落。这可能看起来像是某些门户网站上的“突发新闻”。

现在我的 Javascript 脚本将自动滚动，但当他结束时，滚动将结束。

我尝试了这个选项，当它结束时快速滚动，但这不是一个流畅的选项。

有什么选项可以让我流畅地循环这些滚动段落吗？

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

window.addEventListener('load', () => {
  self.setInterval(() => {
    if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft + 1, 0);
    }
  }, 15);
});

.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>Vyskúšajte Vyskúšajte Vyskúšajtee Vyskúšajte Vyskúšajte Vyskúšajtee Vyskúšajte Vyskúšajte Vyskúšajtee</p>
  <p>Vyskúšajte Vyskúšajte Vyskúšajte Vyskúšajte Vyskúšajte Vyskúšajte Vyskúšajte Vyskúšajte Vyskúšajte</p>
</div>

Answer 1

我会这样做：

• 定义一个函数isElementInViewport(el)，当元素滚动到视野之外时，该函数将返回false。
• 每隔一段时间，检查第一段是否不再可见。如果是这种情况，请将其附加为最后一段。每次执行此操作时，我们都需要调整滚动偏移量。

您可以在下面看到一个正常工作的 sn-p：

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>