[jmathai]

Clever. I wanted to point out there's additional issues introduced by infinite scroll; bookmarking, link sharing, etc.

It's a problem we recently tackled on our infinite scrolling page. Combining modals, pushState (on scroll) and waypoints I think we've solved the the most important problems we introduced with infinite scroll on our gallery page. Here's an example [1] and a blog post about the attention we paid to detail [2].

[1] https://current.trovebox.com/photos/page-1/list

[2] https://medium.com/p/636c0ae6e3b1

[spott]

I'm not a web developer, but why can't you link to an anchor that is slightly below the header, so the view that the user sees is the same view (minus scrollbar position) they would have seen when they were originally on the page, and "infinite scroll" upwards when they scroll up, and down when they scroll down.

_______________ | header | | | | buffered | | images up | |-------------| | | | Viewport | | | | | |-------------| | buffered | | images down | | | | | ---------------

Is this somehow technically very difficult or would this screw with usability in some way that would be unintuitive?

[jmathai]

Good questions. You can link to something below the header but I think the more interesting idea is to do the infinite scroll upwards. I agree that this approach is better than the pagination we've implemented when you link to pages 2+. It doesn't seem technically impossible but the amount of work to implement that might be significant. Here's an example...

We do the masonry layout from left to right. This means we start filling out each row from the left and can leave space on the right of the last row of a page so the next page can begin filling in the remainder of that row before starting a new one. To do this the opposite way if we're "backfilling" photos seems like it could be significantly more complex.

In essence when scrolling "up" we'd have to reverse the alignment and fill photos in from right to left. This alone makes my head hurt to think about.

But aside from our implementation I think a bidirectional infinite scroll really is the solution to work towards. It would feel much more natural that way.

[spott]

I guess you aren't just filling in pictures from a list, are you? you have to find a picture that fits the space you have? If this is the case, it might be best to change the "row height" to justify the images, and ignore the "best fit" image.

Then it is just taking a list of images, and moving the "view" forward or backward on that list, right?

[craigspaeth]

Very cool! Can't believe I hadn't come across this blog post earlier—I'll definitely be reading.

Totally agreed there are other more issues to tackle than scroll position. scrollFrame was a useful little hack born out of a need to solve a glaring problem on a deadline :) I wanted something that we could drop on any existing page with minimal integration effort and so far it's proven pretty useful in that regard.

[jmathai]

Completely agreed. I definitely liked your approach. Making infinite scroll work flawlessly will be a combination of a series of "patches".

Great work.