Infinite scrolling both ways (up and down)

Phoenix Forum Questions / Help
, , ,
1

Hi everyone,

I’m trying to implement an infinite scrolling both up and down. The use case is basically a calendar (like iCal for instance) where you can infinite scroll the following weeks, but also the previous weeks.

For scrolling the following weeks, with a proper Hook and phx-update="append", that’s fine.

However for scrolling the previous weeks, I have the following issues:

  1. phx-update="append" only add the data after the existing ones. Which is fine for half of this use case.

  2. When loading the page, if I try to scroll up right away, no scroll event is published. I first have to scroll down a little bit first.

Any idea?

3 Likes
2

You could use two separate lists: One for prepending one for appending.

1 Like
3

Good idea. However when using prepend the “scrolling position” is lost. I mean, say the top week is week 5, you scroll up, you load week 1 to 4, then the visible week at the top of the screen is now 1. In the calendar use case, it should smoothly go up from week 5 to 4, 3, etc.

1 Like
4

There might be something of interest in this blog post: A hook for handling very large lists with Phoenix Live View ⋅ Alex-min's tech blog

2 Likes
5

Thanks for the pointer, I had a look, however the fattable.js library wouldn’t work in this case. Still searching…

1 Like
6

I’m really interested in a solution for both-ways infinite scroll.

What I’m doing now (which is a workaround) is phx-append only infinite scroll (one way) and for the other way a button with a phx-click triggers a full reload of the list with more data. This is far from an ideal solution

1 Like
7

The latest LiveView 0.18 release introduced streams, which is a perfect solution for this issue: stream/4 documentation

A comprehensive blog post is available here:

3 Likes
8

that blog post does not load for me. (fly,io home does) suggestions?

9

Fly.io is having a partial outage right now.

1 Like