Hey guys,

It’s default example from InfiniteScroll - only difference is that I want to have it on the bottom of the page with absolute positioning, it stops receiving callbacks as soon as I uncomment bottom: 0px; any ideas? I probably can apply proper top value in js but it seems hackish, am I missing something?

Demo

Mix.install([
  {:phoenix_playground, "~> 0.1.3"}
])

Section

defmodule DemoLive do
  use Phoenix.LiveView

  def render(assigns) do
    ~H"""
      <div id="root-container">
        <div id="scroll-root">
          <div id="scroll">
            <ul
              id="posts"
              phx-update="stream"
              phx-viewport-top={@page > 1 && "prev-page"}
              phx-viewport-bottom={!@end_of_timeline? && "next-page"}
              phx-page-loading
            >
              <li :for={{id, post} <- @streams.posts} id={id} class="mb-8">
                <div><%= post.title %></div>
              </li>
            </ul>
            <div :if={@end_of_timeline?} class="mt-5 text-[50px] text-center">
              🎉 You made it to the beginning of time 🎉
            </div>
          </div>
        </div>
      </div>    

    <style type="text/css">
      #root-container {
        position: absolute;
        height: 250px;
        width: 250px;
        # bottom: 0px;
      }
      #scroll-root {
        height: 250px;
        overflow: hidden;
      }
      #scroll {
        overflow: auto;
        height: 250px;
      }
      #posts {
        padding-bottom: 10px;
        padding-top: 10px;
      }
      body { padding: 1em; }
      span { font-family: monospace; }
    </style>
    """
  end

  def mount(_, _, socket) do
  {:ok,
   socket
   |> assign(page: 1, per_page: 20)
   |> paginate_posts(1)}
end

  defp paginate_posts(socket, new_page) when new_page >= 1 do
    %{per_page: per_page, page: cur_page} = socket.assigns
    posts = list_posts(offset: (new_page - 1) * per_page, limit: per_page)

    {posts, at, limit} =
      if new_page >= cur_page do
        {posts, -1, per_page * 3 * -1}
      else
        {Enum.reverse(posts), 0, per_page * 3}
      end

    case posts do
      [] ->
        assign(socket, end_of_timeline?: at == -1)

      [_ | _] = posts ->
        socket
        |> assign(end_of_timeline?: false)
        |> assign(:page, new_page)
        |> stream(:posts, posts, at: at, limit: limit)
    end
  end

  defp list_posts(opts) do
    offset = Keyword.fetch!(opts, :offset)
    limit = Keyword.fetch!(opts, :limit)

    if offset < 200 do
      for i <- offset..(offset + limit - 1) do
        %{id: i, title: "Post #{i}"}
      end
    else
      []
    end
  end

  def handle_event("next-page", _, socket) do
    {:noreply, paginate_posts(socket, socket.assigns.page + 1)}
  end

  def handle_event("prev-page", %{"_overran" => true}, socket) do
    {:noreply, paginate_posts(socket, 1)}
  end

  def handle_event("prev-page", _, socket) do
    if socket.assigns.page > 1 do
      {:noreply, paginate_posts(socket, socket.assigns.page - 1)}
    else
      {:noreply, socket}
    end
  end



end

PhoenixPlayground.start(live: DemoLive)