mwillema
Hi everyone,
I’m trying to implement an infinite scrolling both up and down. The use case is basically a calendar (like iCal for instance) where you can infinite scroll the following weeks, but also the previous weeks.
For scrolling the following weeks, with a proper Hook and phx-update="append", that’s fine.
However for scrolling the previous weeks, I have the following issues:
-
phx-update="append"only add the data after the existing ones. Which is fine for half of this use case. -
When loading the page, if I try to scroll up right away, no scroll event is published. I first have to scroll down a little bit first.
Any idea?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
Bringing learning, work and compliance together since 1987.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 8- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
LostKobrakai
You could use two separate lists: One for prepending one for appending.
mwillema
Good idea. However when using prepend the “scrolling position” is lost. I mean, say the top week is week 5, you scroll up, you load week 1 to 4, then the visible week at the top of the screen is now 1. In the calendar use case, it should smoothly go up from week 5 to 4, 3, etc.
dtew
There might be something of interest in this blog post: A hook for handling very large lists with Phoenix Live View ⋅ Alex-min's tech blog
mwillema
Thanks for the pointer, I had a look, however the fattable.js library wouldn’t work in this case. Still searching…
cblavier
I’m really interested in a solution for both-ways infinite scroll.
What I’m doing now (which is a workaround) is
phx-appendonly infinite scroll (one way) and for the other way a button with aphx-clicktriggers a full reload of the list with more data. This is far from an ideal solutioncblavier
The latest LiveView 0.18 release introduced streams, which is a perfect solution for this issue: stream/4 documentation
A comprehensive blog post is available here:
Mostalive
that blog post does not load for me. (fly,io home does) suggestions?
benwilson512
Fly.io is having a partial outage right now.