Question

我正在使用purescript-halogen，我想在捕获子组件的消息时滚动到div的底部。但是，似乎没有Halogen中的滚动动作控制。那么，我怎么能 Scroll to bottom of div?

我认为一个解决方案是，当事件发生时，调用其他，而不是Halogen，从Main处理。我不确定这个解决方案是不是坏了。

Answer 1

设置滚动位置只需使用普通的DOM功能，以渲染节点为目标。

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

-- 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修改的，所以应该这样做！

Answer 2

基本上与https://stackoverflow.com/a/44543329/1685973的答案相同，但我很难找到不同的进口产品：

import Halogen as H
import Halogen.HTML as HH
import Data.Foldable (for_)
import DOM.HTML.Types (htmlElementToElement)
import DOM.Node.Element (scrollHeight, setScrollTop)
import DOM.HTML.HTMLElement (offsetHeight)

...

-- 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 (ScrollToBottom next) = do
  ref <- H.getHTMLElementRef containerRef
  for_ ref $ \el -> H.liftEff $ do
    let hel = htmlElementToElement el
    sh <- scrollHeight hel
    oh <- offsetHeight el
    let maxScroll = sh - oh
    setScrollTop maxScroll hel
  pure next

PureScript Halogen中的滚动操作

2 个答案: