https://github.com/rl-king/elm-inview

Detect if an element is in the current viewport
https://github.com/rl-king/elm-inview

animation elm scroll viewport

Last synced: 22 days ago
JSON representation

Detect if an element is in the current viewport

• Host: GitHub
• URL: https://github.com/rl-king/elm-inview
• Owner: rl-king
• License: bsd-3-clause
• Created: 2018-11-04T22:24:52.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-02-21T10:11:35.000Z (almost 3 years ago)
• Last Synced: 2023-08-08T20:39:57.371Z (over 1 year ago)
• Topics: animation, elm, scroll, viewport
• Language: Elm
• Homepage: https://package.elm-lang.org/packages/rl-king/elm-inview/latest/
• Size: 27.3 KB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# elm-inview

Detect if an element is in the current viewport.

[example live](https://rl-king.github.io/elm-inview-example/) |

[example code](https://github.com/rl-king/elm-inview-example)

![all](https://rl-king.github.io/elm-inview-example/illustrations/All.svg)

Since there is currently no way of listening to scroll events in Elm you'll have to hookup a port. Below is the bit of JS that gets you the scroll position and an example on how to set it all up.

```elm

port onScroll : ({x: Float, y: Float} -> msg) -> Sub msg

init : () -> ( Model, Cmd Msg )

init _ =

    let

        ( inViewModel, inViewCmds ) =

            InView.init ["1", "2", "3", "4", "5"]

    in

    ( { inView = inViewModel }

    , Cmd.map InViewMsg inViewCmds

    )

subscriptions : Model -> Sub Msg

subscriptions model =

    Sub.batch

       [ InView.subscriptions InViewMsg model.inView

       , onScroll OnScroll

       ]

type Msg

    = OnScroll { x: Float, y: Float }

    | InViewMsg InView.Msg

update : Msg -> Model -> ( Model, Cmd Msg )

update msg model =

    case msg of

        OnScroll offset ->

            ( { model | inView = InView.updateViewportOffset offset model.inView }

            , Cmd.none

            )

        InViewMsg inViewMsg ->

            let

                ( inView, inViewCmds ) =

                    InView.update InViewMsg inViewMsg model.inView

            in

            ( { model | inView = inView }

            , inViewCmds

            )

```

```javascript

window.addEventListener("scroll", function() {

    var offset = {x: window.pageXOffset, y: window.pageYOffset};

    app.ports.onScroll.send(offset);

}, { passive: true });

```

You might want to throttle or debounce this, listening to scroll events and getting positional information can cause some performance issues.