https://eclecticsheep.ai/assets/js/infinitescroll.js

1// Code snippet inspired by https://github.com/douglasrodrigues5/ghost-blog-infinite-scroll
2$(function ($) {
3    var currentPage = 1;
4    var pathname = window.location.pathname;
5    var $document = $(document);
6    var $result = $('.post-feed');
7    var buffer = 100;
8
9    var ticking = false;
10    var isLoading = false;
11
12    var lastScrollY = window.scrollY;
13    var lastWindowHeight = window.innerHeight;
14    var lastDocumentHeight = $document.height();
15
16    // remove hash params from pathname
17    pathname = pathname.replace(/#(.*)$/g, '').replace('/\//g', '/');
18
19    function onScroll() {
20        lastScrollY = window.scrollY;
21        requestTick();
22    }
23
24    function onResize() {
25        lastWindowHeight = window.innerHeight;
26        lastDocumentHeight = $document.height();
27        requestTick();
28    }
29
30    function requestTick() {
31        if (!ticking) {
32            requestAnimationFrame(infiniteScroll)
33        }
34        ticking = true;
35    }
36
37    function infiniteScroll () {
38        // return if already loading
39        if (isLoading) {
40            return;
41        }
42
43        // return if not scroll to the bottom
44        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
45            ticking = false;
46            return;
47        }
48
49        // return if currentPage is the last page already
50        if (currentPage === maxPages) {
51            return;
52        }
53
54        isLoading = true;
55
56        // next page
57        currentPage++;
58
59        // Load more
60        var nextPage = pathname + 'page' + currentPage + '/';
61
62        $.get(nextPage, function (content) {
63            $result.append($(content).find('.post').hide().fadeIn(100));
64
65        }).fail(function (xhr) {
66            // 404 indicates we've run out of pages
67            if (xhr.status === 404) {
68                window.removeEventListener('scroll', onScroll, {passive: true});
69                window.removeEventListener('resize', onResize);
70            }
71
72        }).always(function () {
73            lastDocumentHeight = $document.height();
74            isLoading = false;
75            ticking = false;
76        });
77    }
78
79    window.addEventListener('scroll', onScroll, {passive: true});
80    window.addEventListener('resize', onResize);
81
82    infiniteScroll();
83});