Я использую плагин ScrollMagic, чтобы сделать бесконечную прокрутку. У меня много контента, поэтому я думаю, что было бы неплохо загрузить контент из файла JSON. Я не знаю, как это работает, хотя. вот что я сделал до сих пор:

// init controller var controller = new ScrollMagic.Controller(); // build scene var scene = new ScrollMagic.Scene({triggerElement: "#loader", triggerHook: "onEnter"}) .addTo(controller) .on("enter", function (e) { if (!$("#loader").hasClass("active")) { $("#loader").addClass("active"); //if (console){ // console.log("loading new items"); //} // simulate ajax call to add content using the function below setTimeout(addBoxes, 1000, 9); } }); // pseudo function to add new content. In real life it would be done through an ajax request. function addBoxes (amount) { for (i=1; i{amp}lt;=amount; i  ) { var randomColor = '#' ('00000' (Math.random()*0xFFFFFF{amp}lt;{amp}lt;0).toString(16)).slice(-6); $("{amp}lt;div{amp}gt;{amp}lt;/div{amp}gt;") .addClass("box1") .css("background-color", randomColor) .appendTo("#content"); } // "loading" done -{amp}gt; revert to normal state scene.update(); // make sure the scene gets the new start position $("#loader").removeClass("active"); } // add some boxes to start with. addBoxes(18); 
 #content { width: 390px; margin: auto; text-align: left; } #content .box1 { display: inline-block; position: relative; border-radius: 8px; border: 0px solid white; text-align: center; vertical-align: middle; padding: 0 5px; min-width: 100px; height: 100px; margin: 10px; } #loader { height: 0; overflow: hidden; line-height: 60px; } #loader.active { height: 60px; } 
 {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="content"{amp}gt; {amp}lt;div class="box1" style="background-color: rgb(31, 109, 150);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(72, 206, 143);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(55, 155, 38);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(141, 132, 61);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(228, 67, 251);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(5, 214, 228);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(231, 208, 51);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(104, 69, 16);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(195, 153, 93);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(112, 244, 41);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(44, 123, 5);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(222, 27, 74);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(114, 205, 242);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(45, 247, 128);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(138, 239, 35);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(92, 208, 69);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(213, 10, 25);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;div class="box1" style="background-color: rgb(90, 192, 177);"{amp}gt;{amp}lt;/div{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div id="loader"{amp}gt; {amp}lt;img src="../../assets/img/example_loading.gif"{amp}gt; LOADING... {amp}lt;/div{amp}gt;