文書の過去の版を表示しています。

elmでchatアプリ

参考サイト

https://github.com/heartscry4423/elm-chat

ElmとFirebaseでチャットアプリ作成のためのメモ

一番下まで自動スクロール

Browser.Domの、
getViewportOf関数と、
setViewportOf関数
について調べる必要あり。

https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom

jumpToBottom "history"


jumpToBottom : String -> Cmd Msg
jumpToBottom id =
    Dom.getViewportOf id
        |> Task.andThen (\info -> Dom.setViewportOf id 0 info.scene.height)
        |> Task.attempt (\_ -> NoOp)

https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#setViewportOf

https://qiita.com/uzimaru0000/items/e92e672ab06d77389641
@uzimaru0000
2018年12月19日に更新
任意のイベントデータを含んだメッセージを作る方法とBrowser.Domについて

https://dev.danilafe.com/Matrix-Programs/Scylla/commit/fe065130fe6619c78c305fffb640ddd8f8a68213?lang=ja-JP

requestScrollCmd : Cmd Msg
requestScrollCmd = Task.attempt ViewportAfterMessage (Browser.Dom.getViewportOf "messages-wrapper")

どうしても、getViewportOf でやろうとしてもうまくいかない。
201906時点

linuss/smooth-scrollパッケージ

https://package.elm-lang.org/packages/linuss/smooth-scroll/latest/

使用例

https://ellie-app.com/5Q2PJn9nHdsa1

https://ellie-app.com/5Q6J4RdVfkca1

パッケージのインストール

elm install linuss/smooth-scroll

以下の2つをimport

import SmoothScroll exposing (scrollTo)
import Task exposing (Task)

msgに以下の2つを追加

type Msg
    = NoOp
    | SmoothScroll String

type Msg
    = NoOp
    | SmoothScroll String

リンク

目次：Elm