Curtissimo.IntertialScrollDetector

This module implements an inertial scroll detector to provide an event-driven mechanism to know when inertial scrolling occurs.

This is the directed state diagram for the inertial scroll detector.

State Diagram

Setting up

onInertialScroll : ScrollState msg -> List (Attribute msg)

Adds the following passive event listeners to the scrollable area.

scroll to monitor for scroll events after touch-end
scrollend to monitor for when inertial scrolling ends
touchstart to activate that detector
touchmove to transition the detector to an eligible state for inertial scrolling
touchend to transition the detector to a montoring state for inertial scrolling

import Curtissimo.IntertialScrollDetector as Detector
import Html
import Html.Attributes as Attrs

type Msg
    = InertialScroll Detector.Msg

view =
    Html.div
        [ Attrs.class "scrollable"
        , Detector.onInertialScroll InertialScroll
        ]
        [ Html.p [] [ Html.text "Scroll me!" ] ]

init : Int -> Int -> (Msg -> msg) -> ScrollState msg

Initialize a ScrollState from current scroll offset left and top values.

import Curtissimo.IntertialScrollDetector as Detector


type alias Model =
    { scrollState : Detector.ScrollState }


init =
    ( scrollState = Detector.init 0 0
    , Cmd.none
    )

update : Msg -> ScrollState msg -> ( ScrollState msg, Cmd msg )

Update the detector from the events occurring in the window.

See onInertialScroll for the events the detector uses to monitor for inertial scrolling.

import Curtissimo.IntertialScrollDetector as Detector


update msg model =
    case msg of
        InertialScroll scrollMsg ->
            ( { model
                | scrollState = Detector.update scrollMsg
              }
            , Cmd.none
            )