1

So I would like to make an infinite loop of all the items in a <div>, where the overflow has been set to auto.

It should work so that whenever you reach towards the end of the <div>, the top most content appears again, and continues so on in an infinte scrolling loop.

Is there any way of doing this with Javascript and CSS only...

Here is my project: https://jsfiddle.net/RutRock/hb6y3ead/5/ (Not everything works but its the small widgets on the right side).

Here is the <div> (circled in red) that needs to be looped. Image

1
  • Have a look here
    – Gerard
    Oct 26, 2020 at 10:07

2 Answers 2

7

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>

Try to clone elements in their order when scrolls down.
And don't forget to remember last cloned element - I store it to data- attribute.

2
  • hmm, thank you for this. However, when I put this solution into my project, it only duplicates the 1st item in the list 6 times and appends it to the end. It does not create an infinite loop and loop through other exisitng items. Do you know why that is... Oct 26, 2020 at 12:08
  • @RutvikKarupothula yeah, cause first block of code generates test data - I remove it. And in first string in function you must select your div with news, that holds ul, I thint in your fiddle it will be var div = document.getElementById( "container" );
    – ostapische
    Nov 1, 2020 at 7:45
1

You can use the window.scrollY property and check if it is close to the height of the infinite scrolling element. Then, you insertAdjacentHTML into the infinite scroll after having saved the elements original innerHTML into a variable. Frankly, I've never done this myself but it seems like a good solution.

3
  • Wouldn't this then continue adding the same html over and over again, each time the bottom is reached...or am I mistaken. Could you maybe provide a sample code which shows how it would work...thx Oct 26, 2020 at 11:09
  • It would. That's how infinite scroll works... right? If you want to recycle the HTML, then set the element's innerHTML to '' before
    – user14520680
    Oct 26, 2020 at 11:10
  • aah yes makes sense. I thought insertAdjacentHTML would keep adding more stuff to the actual html file, but it doesn't now i realise. I will try it and get back to you thank u. Oct 26, 2020 at 11:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.