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

Question

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

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

有没有办法仅使用 Javascript 和 CSS 来做到这一点......

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

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

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