mpizenberg / elm-pointer-events / Html.Events.Extra.Wheel

Handling wheel events.


type alias Event =
{ mouseEvent : Html.Events.Extra.Mouse.Event
, deltaY : Basics.Float
, deltaMode : DeltaMode 
}

Type that get returned by a browser wheel event. Its purpose is to provide all useful properties of JavaScript WheelEvent in the context of the elm programming language.

deltaX and deltaZ properties are not provided by default since not compatible with Safari. If you really need them, you can very easily build your own wheel event decoder by extending this one, or looking at the source code of this module and recoding one.


type DeltaMode
    = DeltaPixel
    | DeltaLine
    | DeltaPage

The deltaMode property of a Wheel event.

Basic Usage

onWheel : (Event -> msg) -> Html.Attribute msg

Listen to wheel events. Let's say that we have a message type like this:

type Msg
    = ZoomIn
    | ZoomOut

And we want to zoom in or out on an element depending on a wheel event:

chooseZoom : Wheel.Event -> Msg
chooseZoom wheelEvent =
    if wheelEvent.deltaY > 0 then
        ZoomOut
    else
        ZoomIn

div
    [ Wheel.onWheel chooseZoom ]
    [ text "some zoomable area like an image" ]

Advanced Usage


type alias EventOptions =
{ stopPropagation : Basics.Bool
, preventDefault : Basics.Bool 
}

Options for the event.

onWithOptions : EventOptions -> (Event -> msg) -> Html.Attribute msg

Enable personalization of html events options (prevent default) in case the default options do not fit your needs. You can change options like follows:

onWheel : (Wheel.Event -> msg) -> Html.Attribute msg
onWheel =
    { stopPropagation = False, preventDefault = True }
        |> Wheel.onWithOptions

eventDecoder : Json.Decode.Decoder Event

Wheel event decoder. It is provided in case you want to extend this Wheel.Event type with non provided properties (like deltaX, deltaZ).