xxxxxxxxxx1
<main>2
<div class="container-fluid container-xl">3
<section>4
<div class="row">5
<div class="col-12 col-md-4 col-xl-3 mb-3" id="leftcol"></div>6
<div class="col-12 col-md-8 col-xl-6 mx-auto pe-4 pe-md-0" id="centercol">7
<div class="card card-body bg-light card-social-post me-n3 me-md-0 mb-3"></div>8
<div class="newsfeed" id="newsfeed">9
<p style="height:100vh">default 10 "posts" load here, and trying to get more posts to load here when I scroll to the bottom</p>10
</div>11
<div class="spinner-border mx-auto" id="spinner" style="display:none;"></div>12
</div>13
<div class="col col-xl-3" id="rightcol"></div>14
</div>15
</section>16
</div>17
</main>1
1
xxxxxxxxxx1
let spinner = document.getElementById('spinner');2
let newsfeed = document.getElementById('newsfeed');3
4
// inf-scroll load more5
window.addEventListener('complete.mdb.infiniteScroll', () => {6
console.log('hi 1');7
spinner.style.display = 'flex';8
setTimeout(() => {9
// hide spinner10
spinner.style.display = 'none';11
12
//this can be changed13
const newPost = document.createElement('div')14
newPost.innerText = 'New post.'15
16
newsfeed.append(newPost);17
}, 1000);18
});19
20
// init infinite scroll21
new mdb.InfiniteScroll(window); Console errors: 0