How can I implement an infinite scroll in liveview?

Matheus · April 8, 2020, 2:41pm

I intend to implement an infinite scroll for displaying data. Initially I imagined using the addEventListener’scroll 'event itself with phx-change, to monitor changes, and as soon as the scroll happens, an event is sent to the server and returning an additional data block. But I’m a little confused on how I can make this flow, does anyone have a tip ?

chrismccord · April 8, 2020, 2:47pm

github.com

chrismccord/phoenix_live_view_example/blob/74167e3617a09dc30fccdb88cba52d1861b1199f/lib/demo_web/live/user_live/index_auto_scroll.ex

defmodule DemoWeb.UserLive.Row do
  use Phoenix.LiveComponent

  defmodule Email do
    use Phoenix.LiveComponent

    def mount(socket) do
      {:ok, assign(socket, count: 0)}
    end

    def render(assigns) do
      ~L"""
      <span id="<%= @id %>" phx-click="click" phx-target="#<%= @id %>" phx-hook="Test">
        Email: <%= @email %> <%= @count %>
      </span>
      """
    end

    def handle_event("click", _, socket) do
      {:noreply, update(socket, :count, &(&1 + 1))}

This file has been truncated. show original

and the js hook:

let Hooks = {}

let scrollAt = () => {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
  let clientHeight = document.documentElement.clientHeight

  return scrollTop / (scrollHeight - clientHeight) * 100
}

Hooks.InfiniteScroll = {
  page() { return this.el.dataset.page },
  mounted(){
    this.pending = this.page()
    window.addEventListener("scroll", e => {
      if(this.pending == this.page() && scrollAt() > 90){
        this.pending = this.page() + 1
        this.pushEvent("load-more", {})
      }
    })
  },
  reconnected(){ this.pending = this.page() },
  updated(){ this.pending = this.page() }
}

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})

Matheus · April 8, 2020, 5:01pm

Thank you so much @chrismccord, seeing this flow, I managed to apply it to my project. You are helping me a lot to understand some specific processes to use in LiveView

mwillema · March 28, 2022, 4:17pm

I’m trying to make the infinite scroll works both ways, ie up and down. The use case is for displaying a calendar, much like iCal on Mac where you can scroll infinitely either in the past or in the future. Any idea how this could be achieved?