スクロールバーが要素の最下部にあるかどうかを確認する方法

Question

スクロールバーがElmの要素の下部にあるかどうかを知る方法はありますか？私は、リスト項目が追加されたときにリストの一番下までスクロールするのにDom.Scroll.toBottomを使用しています。それだけでそれを残すときは素晴らしい作品。しかし、手動で少し上にスクロールすると、自動的に下に自動スクロールする必要はありません（手動で下にスクロールするまで）。それ以外の場合は、前のリスト項目を確認することはできません。

Answer 1

以下のコードでclientHeight、scrollHeight、およびscrollTopプロパティを取得できました。スクロールが要素の最下部にあるかどうかを知るために必要なものです。

type alias Model = 
    { messages : List Message 
    , autoScrollMessages : Bool 
    } 

type Msg 
    = NoOp (Result Dom.Error()) 
    | ReceiveMessage ReceivedMessage 
    | ScrolledMessages ScrollEvent 

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
     NoOp res -> 
      (model, Cmd.none) 
     ReceiveMessage message -> 
      ({ model | messages = model.messages ++ [ message ] } , if model.autoScrollMessages then Task.attempt NoOp (Scroll.toBottom "messages") else Cmd.none) 
     ScrolledMessages scrollEvent -> 
      ({ model | autoScrollMessages = scrollEvent.scrollPos == scrollEvent.scrollHeight - scrollEvent.visibleHeight }, Cmd.none) 

type alias ScrollEvent = 
    { scrollHeight : Int 
    , scrollPos : Int 
    , visibleHeight : Int 
    } 

onScroll : (ScrollEvent -> msg) -> Html.Attribute msg 
onScroll tagger = 
    Html.Events.on "scroll" (Decode.map tagger onScrollJsonParser) 

onScrollJsonParser : Decode.Decoder ScrollEvent 
onScrollJsonParser = 
    Decode.map3 ScrollEvent 
     (Decode.at ["target", "scrollHeight"] Decode.int) 
     (Decode.at ["target", "scrollTop"] Decode.int) 
     (Decode.at ["target", "clientHeight"] Decode.int) 

viewMessages : List Message -> Html Msg 
viewMessages messages = 
    ul 
     [ id "messages" 
     , onScroll ScrolledMessages 
     ] <| List.map viewMessage messages