elm - 如何在 Elm 中自动滚动到 div 的底部

Question

我添加<div> s 到包装器 <div>我需要能够滚动到每次添加的最后一个。我该如何在 Elm 中执行此操作？

<div class="messages" style="height: 7em; overflow: scroll">
  <div>Anonymous: Hello</div>
  <div>John: Hi</div>
</div>

直观上，我似乎可以调用 port运行 JavaScript 代码 element.scrollTop = element.scrollHeight :

AddChatMessage chatMessage ->
  ( { model | chatMessages = model.chatMessages ++ [ chatMessage ] } , scrollToBottomPort "div.messages" )

问题是scrollToBottom在model之前被调用得到更新。所以没什么大不了的，我把它转换成 Task 。但是，尽管model现在首先更新，view还没有更新。所以我最终滚动到底部的第二项!

这可能会导致我在 Elm 中很好奇的一个更普遍的问题，如何运行 Cmd由于模型更改而更新 View 后？

Answer 1

您可以使用端口滚动到列表底部。
在这种情况下，您需要设置一个 JavaScript 来等待 1 个 AnimationFrame，然后再进行滚动。确保您的列表已呈现。

更简单的方法是使用 Elm 的 Dom.Scroll图书馆。
并使用toBottom函数。

如果您将其包含在代码中，如下所示:

case msg of
    Add ->
        ( model ++ [ newItem <| List.length model ]
        , Task.attempt (always NoOp) <| Scroll.toBottom "idOfContainer"
        )

    NoOp ->
        model ! []

它应该可以工作。我做了一个工作示例 here in runelm.io