在PureScript Halogen中滾動操作

Question

我正在使用purescript-halogen，並且當子組件的消息被捕獲時我想滾動到div的底部。 但是，它似乎不存在，在鹵素滾動行動控制。 所以，我怎麼能 Scroll to bottom of div?

一個解決方案，我認爲是在事件捕獲的其他這一號召，不是鹵素，過程從主。 我不確定這個解決方案不壞。

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的組件，您可以得到保持實際的DOM元素創建，使用getHTMLElementRef，然後更新的滾動位置：

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，做類似的修改，所以應該做的伎倆！