Web -> Chat view: enable autoscrolling

[AZholtkevych]

Doc: https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html

[ryanwinchester]

I don't see autoscrolling docs in the link

[pursuitofleisure]

@ryanwinchester That was more of a general docs on handling JS events. This post seems like what we want: https://elixirforum.com/t/change-scroll-position-on-liveview-event/40115. Basically we don't want to scroll to the bottom all the time. If the user has scrolled up to read something, we don't want to force a scroll down.

[ryanwinchester]

I can help with this on Friday, but if you are working on it now I think it's worth giving this a shot:

#scroller * {
  overflow-anchor: none;
}

#scroll-anchor {
  overflow-anchor: auto;
  height: 1px;
}

add scroller ID to the scrollable part of the chat and a new div at the bottom (and within) that container with scroll-anchor ID, that will keep the chat scroll anchored to the bottom (even as new messages come in).

You should also be able to scroll up this way without new messages bringing you back to the bottom since the scroll anchor will be out of view when you scroll up.

e.g.

<div id="scroller">
  <!-- chat content -->
  <!-- ... -->

  <div id="scroll-anchor"></div>
</div>

Then, you only need to deal with the initial scroll position (with JS) when you load the view/page, since it won't scroll to the bottom for you, and won't stay scrolled to the bottom until scroll-anchor is in view.

[pursuitofleisure]

@ryanwinchester Thanks, I tested the CSS portion and this is working.

[pursuitofleisure]

@ryanwinchester After further testing this doesn't work in Safari 😞. overflow-anchor isn't supported.

[pursuitofleisure]

@supernintendo Here's a suggested flow:

• When a user enters a chatroom, the messages window should be scrolled to the bottom (i.e. most recent message shown)
• The messages window should continue to automatically scroll as long as the user doesn't scroll up
• If the user scrolls up (away from the latest message), turn off automatic scrolling
• If the user scrolls all the way back down to the latest message, turn automatic scrolling back on

[ryanwinchester]

@ryanwinchester After further testing this doesn't work in Safari 😞. overflow-anchor isn't supported.

Safariiiiiiii

[supernintendo]

@pursuitofleisure Thanks, that UX makes sense to me. I'll work on implementing a Phoenix hook that adds that behavior.