KalleJoP
Hi everyone,
I’m trying to implement infinite scroll in both directions (up and down) using the phx-viewport-top and phx-viewport-bottom events from the default Phoenix.InfiniteScroll hook.
It works great when using a basic div layout or ul list.
However, when I try to apply the same behavior inside a table layout (using either actual <table> elements or display: table/display: grid with divs), it breaks or behaves inconsistently:
- The scroll events don’t fire reliably.
- Sometimes the scroll container doesn’t fill the expected space.
- Sticky headers work, but scrolling seems unpredictable.
I’ve also tried wrapping the table in scrollable containers, adjusting min-height, overflow, etc., but with no luck so far.
Is this a known limitation with how phx-viewport-* interacts with table or grid layouts?
Do I need to customize the hook for these layouts, or is there a clean workaround?
Thanks a lot for your help! 
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
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.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
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 3- Show Best Posts
- Show All Posts (oldest first)
- Show All Posts (newest first)
woylie
I don’t know whether it’s applicable to your situation, but I just added a guide about infinite scroll to the Flop Phoenix documentation: Load More and Infinite Scroll — Flop Phoenix v0.26.1. Might be helpful even if you don’t use the library. Note that the example is using the observer API instead of
phx-viewport-*, based on a code snippet posted by @Thr3x: Infinite scroll pagination · Issue #192 · woylie/flop_phoenix · GitHub.garrison
I can’t speak to the specifics of your problem and I’ve never actually tried building an infinite scroll table. With that said, keep in mind that tables can be weird in that they change their layout based on their rows, so if you have rows come in with different sizes it could reflow the whole table in a way that changes the scroll position and makes things feel buggy. That could be what’s happening.
KalleJoP
Thanks for the advice!
I managed to solve it (although it’s still a bit buggy at times) using the Intersection Observer API combined with parts of the original Phoenix hook.
I’ve shared the hook as a GitHub Gist in case anyone else finds it useful.
If you have any suggestions for improvements, I’d love to hear them!