Infinite scroll with LiveView's `phx-viewport-bottom`

LiveView 0.19 introduced phx-viewport-top and phx-viewport-bottom. From the docs:

The phx-viewport-top and phx-viewport-bottom bindings allow you to detect when a container’s first child reaches the top of the viewport, or the last child reaches the bottom of the viewport. This is useful for infinite scrolling

That allowed me to make a one line change and remove my entire InfiniteScroll JS hook! 🥳

Want the latest Elixir Streams in your inbox?

    No spam. Unsubscribe any time.