Show divs according to the page scroll like Infinite scroll

Question

I have this page with a lot of information which makes my page loading time slow. So I found this amazing code for load more with a button. I'm trying to figure out how to do it without a load more button and show divs automatically while scrolling. Here is the code below.

Codepen Demo

  <link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <div class="container">
      <div class="flex">
        <div class="content">Box 1</div>
        <div class="content">Box 2</div>
        <div class="content">Box 3</div>
        <div class="content">Box 4</div>
        <div class="content">Box 5</div>
        <div class="content">Box 6</div>
        <div class="content">Box 7</div>
        <div class="content">Box 8</div>
        <div class="content">Box 9</div>
        <div class="content">Box 10</div>
      </div>
      
      <a href="#" id="loadMore">Load More</a>
    </div>
    <style>
    .flex {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    .content {
      height: 100px;
      width: 45%;
      color: #fff;
      font-size: 24px;
      line-height: 100px; /* centering text just for view */
      text-align: center;
      background-color: grey;
      margin: 5px;
      border: 1px solid lightgrey;
      display: none;
    }
    #loadMore {
      width: 200px;
      color: #fff;
      display: block;
      text-align: center;
      margin: 20px auto;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid transparent;
      background-color: blue;
      transition: .3s;
    }
    #loadMore:hover {
      color: blue;
      background-color: #fff;
      border: 1px solid blue;
      text-decoration: none;
    }
    .noContent {
      color: #000 !important;
      background-color: transparent !important;
      pointer-events: none;
    }
    </style>
    <script>
    $(document).ready(function(){
      $(".content").slice(0, 4).show();
      $("#loadMore").on("click", function(e){
        e.preventDefault();
        $(".content:hidden").slice(0, 4).slideDown();
        if($(".content:hidden").length == 0) {
          $("#loadMore").text("No Content").addClass("noContent");
        }
      });
      
    })
    </script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Does anyone can help. It would be much appreciatable. I have tried a lot of infinite scrolls, most of them are toomuch code. I wish to do something very simple.

Answer 1

If you're using jQuery that's easy to achieve with the scroll event and some calculations:

loadMoreScroll( element ) {

   // Are we loading more items? Prevent duplicate ajax requests.
   let loadingMore = false;

   element.scroll(function() {

      if (loadingMore) return;
      loadingMore = true;

      // This is the bottom position of your browser right now.
      let pageBottom = $(window).scrollTop() + $(window).height();

      // This is the bottom position of the container
      let containerBottom = $(this).offset().top + $(this).height();

      // Give some space to start loading more items before touching the bottom.
      let margin = 50;

      // Now check if by scrolling you reached the end of the container:
      if (pageBottom >= containerBotton - margin) {

         // Ajax load more here
         // If there are more items to load:
              loadingMore = false;
         // If no more items to load, leave 'loadingMore' to true, so
         // all this code doesn't get executed anymore.

      }

   });

}

loadMoreScroll( $("#myContainer") );