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)
