javascript - Elm 中的无限滚动

Question

我正在 Elm 中构建一个简单的应用程序，它只显示一个下面的 div 列表，我想添加无限滚动功能，以便在每次页面的最后一个 div 出现在视口(viewport)中时添加新内容。

Elm 有没有办法知道 div 何时出现在视口(viewport)中？作为替代方案，有没有一种方法可以将鼠标滚动事件作为信号进行跟踪？

Answer 1

目前 Elm 不支持滚动事件，因此您必须求助于使用端口。这是一个简单的例子。

我们需要一个 javascript 函数来告诉我们列表中的最后一个元素是否在视口(viewport)中。我们可以从 this StackOverflow answer 中获取 isElementInViewport 代码(复制在这里以供将来引用):

function isElementInViewport (el) {
    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}

假设您的 HTML 看起来像这样:

<div class="wrapper">
  <div class="item">...</div>
  <div class="item">...</div>
</div>

您的 Elm 代码可以有一个端口作为信号告诉我们最后一项是否可见。

port lastItemVisible : Signal Bool

现在您需要在 Javascript 端连接端口代码。此代码将监听 window.onscroll 事件，然后检查 .wrapper div 中的最后一项是否可见，并发送适当的信号。

var app = Elm.fullscreen(Elm.Main, {
  lastItemVisible: false
});

window.onscroll = function () {
  var wrapper = document.getElementsByClassName("wrapper")[0];
  var lastItem = wrapper.childNodes[wrapper.childNodes.length - 1];

  if (isElementInViewport(lastItem)) {
    app.ports.lastItemVisible.send(true);
  } else {
    app.ports.lastItemVisible.send(false);
  }
};

如果您只是想要跟踪滚动事件的信号，there is a related StackOverflow answer here .