PureScript Halogen 中的滚动操作

Question

我正在使用 purescript-halogen，并且我想在捕获子组件的消息时滚动到 div 底部。然而，卤素中似乎不存在滚动动作控制。那么，如何 滚动到 div 底部呢？

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

Answer 1

设置滚动位置只需使用普通的 DOM 功能，针对渲染的节点即可完成。

\n\n

为此，您需要ref在 HTML DSL 中向要滚动的节点添加一个属性：

\n\n

-- Define this in the same module as / in the `where` for a component\ncontainerRef \xe2\x88\xb7 H.RefLabel\ncontainerRef = H.RefLabel "container"\n\n-- Use it with the `ref` property like so:\nrender =\n  HH.div\n    [ HP.ref containerRef ]\n    [ someContent ]\n

\n\n

然后在evalfor 组件中，您可以使用 创建的实际 DOM 元素，getHTMLElementRef然后更新其上的滚动位置：

\n\n

eval (ScrollToBottom next) = do\n  ref \xe2\x86\x90 H.getHTMLElementRef containerRef\n  for_ ref \\el \xe2\x86\x92 H.liftEff do\n    scrollHeight \xe2\x86\x90 DOM.scrollHeight el\n    offsetHeight \xe2\x86\x90 DOM.offsetHeight el\n    let maxScroll \xe2\x86\x90 scrollHeight - offsetHeight \n    DOM.setScrollTop maxScroll el\n  pure next\n

\n\n

这里的代码片段是根据一些现实世界的代码修改而来的，这些代码执行类似的操作，所以应该可以解决问题！

\n