curtissimo/elm-inertial-scroll-detection/3.1.0

elm-inertial-scroll-detection

Do you want to show and hide navigation bars based on inertial scrolling just like native apps do?

If so, then this package is for you!

Examples

Check out the Scroll live example on GitLab Pages.

Or, check out the ./examples/README.md.

Scrollable HTML elements

You need to make sure the scrollable element your tracking has its CSS set correctly to allow inertial scrolling. After that, you can effectively use the inertial scroll detector.

CSS

For an element to be scrollable, you need to set a height for the element as well as set its overflow style property. Something like this.

.scrollable {
  height: 400px;
  overflow: auto;
}

Using Curtissimo.InertialScrollDetector

The detector is a stateful component, so needs to be wired up using your model, update, and view functions.

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

-- Your element, sandbox, application

type alias Model =
    { scrollState : Detector.ScrollState }

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

type Msg
    = InertialScroll Detector.Msg

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

view model =
    Html.div 
      [ Attrs.class "scrollable"
      , Detector.onInertialScroll InertialScroll
      ]
      (List.repeat 200 (Html.p [] [Html.text "Scroll me!"]))