There is an example of infinite scroll to bottom.

  var $ol = document.querySelector("ol");
    
    function load_more() {
      var html = "";
      
      for (var i = 0; i < 5; i++) html += '<li></li>';
      $ol.innerHTML += html;
    }
    
    $ol.addEventListener("scroll", function() {	
      if ($ol.scrollHeight - $ol.scrollTop === $ol.clientHeight) 
        load_more();
    });

    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>


  

There is an example of infinite scroll to bottom.

  var $ol = document.querySelector("ol");
    
    function load_more() {
      var html = "";
      
      for (var i = 0; i < 5; i++) html += '<li></li>';
      $ol.innerHTML += html;
    }
    
    $ol.addEventListener("scroll", function() {	
      if ($ol.scrollHeight - $ol.scrollTop === $ol.clientHeight) 
        load_more();
    });

    <ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>


  

There is an jsfiddle example

How do I make infinite scroll like this but to top with js?

• javascript
• html
• css
• scroll

2 Answers 2

With $ol.scrollTop === 0 you can check if the ol is scrolled to the top. scollTop is always 0 when in the most upper position.

Also changed the loadMore function so it appends the new element to the start of the element with $ol.prepend(document.createElement('li'))

Last I added $ol.scrollTop = firstEl.offsetTop; in the loadmore function to automaticly scroll to the element that was previously the first element.

I reversed your OL so it's easier to see new items are loaded. This is not necessary of course.

var $ol = document.querySelector("ol");

//Call this function onload so new content gets loaded and scrolling upwards bee available.
load_more();

//Add event listner that triggers function when the element is scrolled to the top.
$ol.addEventListener("scroll", function() {
  if ($ol.scrollTop === 0)
    load_more();
});

//Load more items.
function load_more() {
  //Get the current first element.
  var firstEl = $ol.firstElementChild;

  //prepend the new elements.
  for (var i = 0; i < 5; i++) {
    $ol.prepend(document.createElement('li'))
  }

  //scroll to the previous first element.
  $ol.scrollTop = firstEl.offsetTop;
}

ol {
  height: 100px;
  overflow: scroll;
}

<ol reversed>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

Another way to achieve this is through the use of IntersectionObserver.

const firstOptions = {
    threshold: 1,
    rootMargin: '100px'
}

const firstCardObserver = new IntersectionObserver((entries)=>{
    const firstCard  = entries[0]

    if(!firstCard.isIntersecting) return

    loadCardsAtStart()

    firstCardObserver.unobserve(firstCard.target)
    firstCardObserver.observe(document.querySelector('.card:first-child'))

}, firstOptions)

firstCardObserver.observe(document.querySelector('.card:first-child'))

The rootMargin here plays and important role as it prevents the cards from loading in an infinite loop.

Also, make sure you use prepend() inside your loadCardsAtStart() to insert the newly created cards at the top.

Refer to this video by WebDevSimplified in which he does the same thing but for infinite scroll to bottom.