Infinite Scrolling with Turbo and Frames

OK, real quick—this is a pattern I often use for pagination on a site. The bit below is from an Eleventy site, but I’ve done the same thing in Astro, and Jekyll. It’s easy to implement, feels modern on the page, and brings sensible fallbacks along for the ride.

BaSIcaLLy…

I’m nesting TurboFrames on each page. The first frame contains the current set of items. The second, nested frame, contains a moarrr posts link to the next page. You could just request the next page when the user scrolls to the bottom of the current set (infinite scroll)—but don’t do that.

Nothing has contributed more to our current American psychosis than infinite scroll and vertical video—let’s break the cycle.

Turbo handles the rest, extracting the next set of items+moarrr link from the requested page and placing all of that into the target frame of the current page (without reloading the page, changing the scroll position, or updating the URL). It’s essentially an infinite scroll—but with a button so the user remains in control, and a NoJS fallback.

    ---
    title: The Blog
    layout: default
    pagination:
    data: collections.post
    size: 10
    alias: posts
    reverse: true
    ---
    <section>
    <div>
        <div>
        <turbo-frame id="posts-{{pagination.pageNumber}}">
            <ul class="list-none">
            {%- for item in posts -%}
            {% include 'components/post-teaser.njk' %}
            {%- endfor -%}
            </ul>
            {% if pagination.nextPageHref %}
            <turbo-frame id="posts-{{pagination.pageNumber + 1}}">
                <a target="posts-{{pagination.pageNumber + 1}}" href="{{ pagination.nextPageHref | url }}">MOOOARR POSTS</a>
            </turbo-frame>
            {% endif %}
        </turbo-frame>
        </div>
    </div>
    </section>

But Why?

Pagination on the web is as certain as death or taxes—and equally as charming. OK, I’m not really being fair. Traditional pagination controls are straight forward, easy to understand, and they do their job. They are an admirable solution to a classic and persistent challenge of the web—how do you sensibly show someone all the crap. To me though, they seem quite anachronistic on a modern web page. In my mind they’re situated right between the <marquee> and <blink> tags—they belong to an earlier era of the web, best left in the past.

When AJAX became popular people went all in on infinite scroll (no pagination controls, just load moar crap as the user scrolls). It was the right idea I think, scrolling is pretty clear user intent—but it became a dark pattern, weaponized on social media sites. I think the above pattern strikes a nice modern ballance—with a reasonable fallback for when JS isn’t available.