Level up with a premium membership

Now, to tackle the first problem of always having this scrolled at the bottom, we can create out a element at the bottom here outside of our for each loop. And we can use Alpine to always scroll to this element. So what we can do is take the element, which is this div element, and we can use scroll into view. Because this is at the bottom of our message stack, it's always going to be scrolled to within that scrollable element.

So now when I refresh the page, there is a little bit of a flicker, but you can see that this always bumps right down to the bottom. So we'll always see the latest messages. Now, if we go ahead and write a message in here, you can see that we now need to tackle the problem of always keeping this scrolled at the very bottom. To do this, what we can use and Tailwind doesn't support this, so we're going to have to add in a custom almost inline style to this is going ahead and choosing a viewport size.

We'll just use small. So this works globally and we'll say overflow anchor and we're going to set this to auto and then on the outer container. So on this container just here, we're going to set this to overflow anchor of none. Just by doing that with these two elements, any time this content overflows, we're going to go ahead and push down to the very bottom on this div.

And just before we forget, we need to give this element some height so it can actually recognize it. And we can just set that as a one pixel height. That's all we need to get this working. OK, if we head over, give both of these a refresh, we know that they end up at the bottom.

Let's add in another message. And as you can see, this element is always scrolled to on overflow. So either way round is just going to work. And of course, whoever is in the chat room is always going to see the latest message at the bottom scrolled into view.