我添加<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 后?
最佳答案
您可以使用端口滚动到列表底部。
在这种情况下,您需要设置一个 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
关于elm - 如何在 Elm 中自动滚动到 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41052558/