使用 div 内容创建无限滚动循环答案

【问题标题】：Creating an infinite scroll loop with div contents使用 div 内容创建无限滚动循环
【发布时间】：2020-10-26 10:02:04
【问题描述】：

所以我想对<div> 中的所有项目进行无限循环，其中overflow 已设置为auto。

它应该可以工作，这样每当您到达<div> 的末尾时，最顶部的内容就会再次出现，并在无限滚动循环中继续。

有没有办法只使用 Javascript 和 CSS...

这是我的项目： https://jsfiddle.net/RutRock/hb6y3ead/5/（并非所有功能都有效，但右侧的小部件除外）。

这是需要循环的<div>（红色圆圈）。

【问题讨论】：

看看here

标签： javascript html jquery css infinite-loop

【解决方案1】：

document.addEventListener( "DOMContentLoaded", function() {
  // it's a div, that holds your news
  // it holds ul with news in li elements
  var div = document.getElementById( "container" );
  div.addEventListener( "scroll", function() {
    var max_scroll = this.scrollHeight - this.clientHeight;
    var current_scroll = this.scrollTop;
    var bottom = 100;
    if ( current_scroll + bottom >= max_scroll ) {
      var ul = document.getElementsByTagName( "ul" )[ 0 ];
      var current = parseInt( ul.dataset.current, 10 );
      var li = document.getElementsByTagName( "li" )[ current ];
      var new_li = li.cloneNode( true );
      ul.appendChild( new_li );
      ul.dataset.current = current + 1;
    }
  } );
} );

div.block {
  border: 1px solid #000000;
  max-width: 200px;
  max-height: 400px;
  overflow-y: auto;
}
div.block::-webkit-scrollbar {
    display: none;
}
ul {
  list-style-type: none;
}

<div class="block" id="container">
  <ul data-current="0">
    <li>
      <h3>Post 0</h3>
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mAEKlOpfNWWj9nu8pkQOxNbbEu_kQCFCI1z8nNFXQ=k-s32" />
    </li>
    <li>
      <h3>Post 1</h3>
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mAEKlOpfNWWj9nu8pkQOxNbbEu_kQCFCI1z8nNFXQ=k-s32" />
    </li>
    <li>
      <h3>Post 2</h3>
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mAEKlOpfNWWj9nu8pkQOxNbbEu_kQCFCI1z8nNFXQ=k-s32" />
    </li>
    <li>
      <h3>Post 3</h3>
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mAEKlOpfNWWj9nu8pkQOxNbbEu_kQCFCI1z8nNFXQ=k-s32" />
    </li>
    <li>
      <h3>Post 4</h3>
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mAEKlOpfNWWj9nu8pkQOxNbbEu_kQCFCI1z8nNFXQ=k-s32" />
    </li>
    <li>
      <h3>Post 5</h3>
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mAEKlOpfNWWj9nu8pkQOxNbbEu_kQCFCI1z8nNFXQ=k-s32" />
    </li>
    <li>
      <h3>Post 6</h3>
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mAEKlOpfNWWj9nu8pkQOxNbbEu_kQCFCI1z8nNFXQ=k-s32" />
    </li>
    <li>
      <h3>Post 7</h3>
      <img src="https://lh3.googleusercontent.com/a-/AAuE7mAEKlOpfNWWj9nu8pkQOxNbbEu_kQCFCI1z8nNFXQ=k-s32" />
    </li>
  </ul>
</div>

向下滚动时尝试按顺序克隆元素。
并且不要忘记记住最后克隆的元素 - 我将它存储到 data- 属性。

【讨论】：

嗯，谢谢你。但是，当我将此解决方案放入我的项目时，它只会将列表中的第一项复制 6 次并将其附加到末尾。它不会创建无限循环并循环通过其他现有项目。你知道这是为什么...
@RutvikKarupothula 是的，因为第一个代码块会生成测试数据 - 我将其删除。在函数的第一个字符串中，您必须选择带有新闻的 div，它包含 ul，我认为在您的小提琴中它将是 var div = document.getElementById( "container" );

【解决方案2】：

您可以使用window.scrollY 属性并检查它是否接近无限滚动元素的高度。然后，在将原始元素 innerHTML 保存到变量中后，您将 insertAdjacentHTML 进入无限滚动。坦率地说，我自己从来没有这样做过，但这似乎是一个很好的解决方案。

【讨论】：

这难道不会继续一遍又一遍地添加相同的html，每次达到底部......还是我弄错了。您能否提供一个示例代码来说明它是如何工作的...谢谢
会的。这就是无限滚动的工作原理……对吧？如果要回收 HTML，则将元素的 innerHTML 设置为 '' before
啊，是的，有道理。我以为insertAdjacentHTML 会继续向实际的 html 文件添加更多内容，但现在我没有意识到。我会尝试并回复你谢谢你。