滚动时如何创建 Elm Lang 事件？

Question

我想知道用户何时在我的网页中滚动。每次用户滚动后如何创建 Elm 事件？

Answer 1

最简单的方法是在 div 上创建一个事件侦听器。使用 Html.Events on 创建自定义事件侦听器。

然后需要将 html 事件解码为 Elm 事件。像这样：

on "wheel" (Decode.succeed Scroll) 其中 Scroll 是 Msg，它可以是您应用的任何 Msg。这可以应用于任何 div。例如，这里有一个 Elm-UI 的实现，用于检测网页中任何位置的滚动。

import Html.Events exposing (on)
import Json.Decode as Decode

view model =
    layout
        [ htmlAttribute <| on "wheel" (Decode.succeed Scroll)
        ]
    <|
        column []
            [
               ~~~ snip
            ]

Answer 2

您几乎肯定想使用 port 来创建滚动事件。 Wheel cacn 有一些奇怪的副作用。

还建议忽略一些滚动事件，否则您的网站每分钟会产生数千个事件。这是通过下面的 ticking 变量和 requestAnimationFrame 完成的。根据您想要的响应速度，将 ticking > 5 更改为您想要的任何整数。

var ticking = 0;
window.addEventListener("scroll", function (event) {
    if (ticking > 5) {
      window.requestAnimationFrame(function() {
        app.ports.recvScroll.send();
        ticking = 0;
      });
    }
    ticking += 1;
});

recvScroll是相关elm代码中的端口名称。但是你可以随意命名它。

滚动时如何创建 Elm Lang 事件？

How do I create an Elm Lang event when scrolling?

html

events

scroll

mousewheel

elm