Show HN: It's possible to do infinite scroll without JavaScript | Hacker News Reader

Show HN: It's possible to do infinite scroll without JavaScript

noscript-infinite-catfacts.glitch.me

34 pointseasrng15 comments

huh, let me add that to the list of very annoying things that can be done without javascript (it was already on the with javascript list).

Not throwing shade on this, but this cool demo is also a very illustrative example of how infinite scroll can be a bad experience.

More people should stop and think before adding infinite scroll. Questions like "could I just show all the items on one page?" and "will having only 5 items at a time with an infinite scroll be disruptive and frustrating?".

There are several sites that seem to have implemented infinite scroll as an aesthetic choice rather than a functional one. Showing 50 rows and a next button looks old fashioned, I guess, while a blocking request every time you scroll below the fold is modern and forward-thinking.

Please, don't give them ideas.

Nobody would actually do this, right?

For me with Chrome on Windows, I can just scroll to the bottom and it's sat there doing nothing but with a "Waiting for ..." in the status tab. Possibly it's just because the server is busy, or because they're DDOSing their own server by keeping all these connections open, or maybe it just doesn't work. It's kind of hard to tell.

EDIT: After refreshing the page with F5, I then saw it working, and upon scrolling to the end of the document, there was no waiting status message. But looks like it still needs work with timing issues / cold cache load.

Slightly off topic but this reminded me of a post I wrote many many years ago on infinite scrolling in JS that degraded for no JS and also persisted the scroll location when copying and sharing the URL.

https://medium.com/@jmathai/ux-nirvana-elegant-pagination-wi...

All those cat facts are interesting by the way.

How does this work? I looked at the source and don't see anything specifically related to scrolling.

It's server side magic. The connection is kept open, and there's link to load more along with an img tag with loading="lazy" at the bottom of the page. When the image is requested (which happens once you've scrolled close to it because of loading="lazy"), the server sends more facts and a new style tag that hides the previous "load more" link on the existing connection. You can read the server-side source at https://glitch.com/edit/#!/noscript-infinite-catfacts

on mobile safari and LTE, after a while it stops loading and i can scroll to the borrom

If that happens, it should gracefully degrade and provide a load more link.

I’m on an iPhone 12 mini and can scroll to the bottom and there is no “load more” link.

May be you reached the end of the list?

But shouldn't it loop back to the beginning to be ‘infinite’? I too reached the end of the page on an iphone, although the scroll bar was getting smaller while scrolling for a while (indicating the page was growing/new stuff added/loaded)

May be you reached the end of the list?

Reply on news.ycombinator.com