스크롤바가 엘레멘트의 맨 아래에 있는지 알아 보는 방법

Question

엘름의 엘레멘트 맨 아래에 스크롤 바가 있는지 알 수있는 방법이 있습니까? 목록 항목을 추가 할 때 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