Действие прокрутки в PureScript Halogen

Question

Я использую purescript-halogen и хочу прокрутить до конца div, когда сообщение дочернего компонента было перехвачено. Тем не менее, кажется, что нет управления прокруткой в ​​галогене. Итак, как я могу прокрутить до нижней части div?

Я думаю, что одним из решений является вызов другого, а не галогенового процесса из Main, когда событие произошло. Я не уверен, что это решение не плохое.

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 для компонента вы можете получить фактический созданный элемент 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

Фрагменты здесь модифицированы из некоего реального кода, который делает что-то похожее, так что надо делать свое дело!

Answer 2

По сути тот же ответ, что и /questions/3221311/dejstvie-prokrutki-v-purescript-halogen/3221316#3221316, но мне было трудно найти различные варианты импорта:

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