Infinite scrolling both ways (up and down)

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?

2 Likes

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

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.

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

1 Like

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

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