I add <div>
s to a wrapper <div>
and I need to be able to scroll to the last one added each time. How do I do this in Elm?
<div class="messages" style="height: 7em; overflow: scroll">
<div>Anonymous: Hello</div>
<div>John: Hi</div>
</div>
Intuitively, it seems like I could call a port
that runs the JavaScript code element.scrollTop = element.scrollHeight
:
AddChatMessage chatMessage ->
( { model | chatMessages = model.chatMessages ++ [ chatMessage ] } , scrollToBottomPort "div.messages" )
The problem is scrollToBottom
gets called before the model
gets updated. So no big deal, I convert that into a Task
. But still, even though the model
gets updated first now, the view
does not get updated yet. So I end up scrolling to the 2nd item from the bottom!
This maybe leads to a more general question I'm curious about in Elm, how do you run a Cmd
after the view is updated due to a change in the model?