purescript - PureScript Halogen 中的滚动操作

Question

我正在使用 purescript-halogen，当捕获到子组件的消息时，我想滚动到 div 的底部。
但是，在 Halogen 中似乎不存在滚动 Action 控制。
那么，我该如何
Scroll to bottom of div?

我认为的一种解决方案是在事件捕获时从 Main 调用其他进程，而不是 Halogen。
我不确定这个解决方案还不错。

Answer 1

设置滚动位置只是通过使用普通的 DOM 功能完成的，目标是渲染节点。

为此，您需要添加 ref 将 HTML DSL 中的属性添加到要滚动的节点:

-- Define this in the same module as / in the `where` for a component
containerRef ∷ H.RefLabel
containerRef = H.RefLabel "container"

-- Use it with the `ref` property like so:
render =
  HH.div
    [ HP.ref containerRef ]
    [ someContent ]

然后在 eval对于组件，您可以使用 getHTMLElementRef 获取创建的实际 DOM 元素。 ，然后更新滚动位置:

eval (ScrollToBottom next) = do
  ref ← H.getHTMLElementRef containerRef
  for_ ref \el → H.liftEff do
    scrollHeight ← DOM.scrollHeight el
    offsetHeight ← DOM.offsetHeight el
    let maxScroll ← scrollHeight - offsetHeight 
    DOM.setScrollTop maxScroll el
  pure next

这里的片段是从一些 real world code 修改而来的做类似的事情，所以应该做到这一点!