20 / 20

Infinite Scroll in JavaScript

Implement infinite scroll

IntermediateMini ProjectsExample 20 of 20

infinite-scroll.js

1class InfiniteScroll {
2    constructor(loadMore) { this.loadMore = loadMore; this.page = 1; }
3    init() { window.addEventListener('scroll', () => { if(window.innerHeight + window.scrollY >= document.body.offsetHeight) { this.loadMore(this.page++); } }); }
4}

Output

// Infinite scroll

What's going on

Infinite Scroll loads content as user scrolls.

PreviousProgress Bar