Elm-Scroll - An Effect Manager for Scroll Events

The good news is that you quite likely won’t need an effect manager, native or ports to do this sort of thing in the next release. The bad news is that I wouldn’t advise using an effect manager to deal with this in the meantime.

So the way I’d recommend doing this sort of thing right now would be using a port. Here’s an example for dealing with wheel events: https://ellie-app.com/qqp6pVJRQa1/0

The thing is that the next release will basically have a pair of functions onWindow and onDocument, to subscribe to events on the window and the document. So in that world, I could very easily adapt the code in the above Ellie:

subscriptions : model -> Sub Msg
subscriptions _ =
  onDocument "wheel" (Decode.map Wheel wheelDecoder)

Overall, this seems like it provides the nicer path:

  • :heavy_check_mark:️ possible right now
  • :heavy_check_mark:️ easy to adapt in the future
  • :heavy_check_mark:️ no need for native/kernel/effect managers/…

In fact, in a world where onDocument and onWindow are available, a package like the one described here could be released, and the entire implementation (adapted from your code :wink: ) would be this:

scroll : (Position -> msg) -> Sub msg
scroll tagger =
    onDocument "scroll" (Json.map tagger position)

position : Json.Decoder Position
position =
    Json.map2 Position
        (Json.at [ "target", "defaultView", "scrollX" ] Json.int)
        (Json.at [ "target", "defaultView", "scrollY" ] Json.int)
5 Likes