DomRenderHook: Scrolling to the bottom when adding an element

domrenderhook.hs

{-# LANGUAGE FlexibleContexts #-}
{-# LANGUAGE RecursiveDo #-}
{-# LANGUAGE OverloadedStrings #-}

import qualified Data.Map as Map
import qualified Data.Text as T
import Reflex.Dom
import GHCJS.DOM.Element (setScrollTop, getScrollHeight)

main :: IO ()
main = mainWidget $ do
  x <- count =<< button "Add a line"
  m <- foldDyn (\n m -> Map.insert n (T.pack $ show n) m) Map.empty (updated x)

  let renderHook container domAction = do
        result <- domAction
        h <- getScrollHeight $ _element_raw container
        setScrollTop (_element_raw container) h
        return result

  rec (e, _) <- elAttr' "div" ("style" =: "top:0;left:0;width:50px;height:50px;border:1px solid black;overflow-y:scroll;") $
        withRenderHook (renderHook e) $ listWithKey m $ \_ v -> el "div" $ dynText v
  return ()