How to implement Reverse infinite scrolling for chat messages?

[sureshvv]

I went through the documented example for Infinite Scroll using htmx.

Can it be adapted for reverse infinite scrolling?

i.e. show more recent set of messages and allow scrolling up.

A jQuery based solution is provided here:

https://stackoverflow.com/questions/40305028/reverse-infinity-scroll

Can this be duplicated using htmx?

[netadapt]

I've just implement a chat system (styled similarly to Facebook messenger's web app), and have done this successfully with the existing HTMX API.

Using "hx-trigger" / "intersect once" was key to this, in a reversed flow flex box so I could even continue using my existing infinite scrolling code used elsewhere in the web app.

[blurrcat]

Thanks for the idea @netadapt !

Just to share more details with folks, this worked for me:

#messages {
  display: flex;
  flex-direction: column-reverse;  // this way the container grows upwards - when items are added the scroll is preserved
}

The oldest message(visually the top message) which would trigger request to load more messages:

<div id="msg_10" 
  hx-get="/messages?before=msg_10" 
  hx-trigger="intersect once"
  hx-swap="afterend">

2 important details:

• the server returns messages with the most recent one first - column-reverse would reverse the order when display them so that the most recent messages are displayed at the bottom
• new messages are added afterend and visually to the top

[sureshvv]

I was able to do this using a few lines of javascript. It ended up easier to do it this way.

I guess one may need to fall back on javascript anyway.