Подтвердить что ты не робот

Бесконечный свиток в Вязе

Я создаю простое приложение в Elm, которое показывает только список divs один под другим, и я хотел бы добавить бесконечную функциональность прокрутки, чтобы добавлять новый контент каждый раз, когда последний div страницы появляется в окне просмотра.

Есть ли способ в Вяз узнать, когда в окне просмотра появляется div? В качестве альтернативы, есть способ отслеживать, как сигнал, событие прокрутки мыши?

Ответ 1

В настоящее время нет поддержки Elm для событий прокрутки, поэтому вам придется прибегать к использованию портов. Вот простой пример.

Нам нужна функция javascript, чтобы сообщить нам, находится ли последний элемент в списке в порт представления. Мы можем взять код isElementInViewport из fooobar.com/info/10631/... (скопировано здесь для дальнейшего использования):

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, а затем проверить, отображается ли последний элемент внутри div .wrapper, и отправить соответствующий сигнал.

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);
  }
};

Если вместо этого вам нужен сигнал для отслеживания событий прокрутки, fooobar.com/info/455895/....