创建具有 div 内容的无限滚动循环

Question

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

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

有什么方法可以仅使用 Javascript 和 CSS...

这是我的项目： https://jsfiddle.net/RutRock/hb6y3ead/5/（并非一切正常，但右侧的小部件）。

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

Answer 1

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

Answer 2

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- 属性。

创建具有 div 内容的无限滚动循环

Creating an infinite scroll loop with div contents

html

javascript

css

jquery

infinite-loop