Infinite scroll loads more content when the user nears the bottom of the page. Compare scrollTop plus window height to document height. Load the next page via AJAX, append results, and use a flag to prevent duplicates.
Infinite Scroll
let page = 1;
let loading = false;
$(window).on('scroll', function() {
const atBottom = $(window).scrollTop() + $(window).height()
>= $(document).height() - 100;
if (atBottom && !loading) {
loading = true;
$.get('/api/posts?page=' + ++page, function(html) {
$('#feed').append(html);
loading = false;
});
}
});