Полимерное событие при прокрутке содержимого не запускается

Question

У меня есть iron-list к которому я добавляю новые предметы при прокрутке вниз iron-scroll-threshold, Это отлично работает.

Что мне также нужно, так это общее событие, которое запускается при остановке прокрутки.

Мне нужно знать, видели ли перечисленные элементы (m.message) пользователем, проверяя, какие элементы в данный момент видны в окне просмотра после прокрутки, а затем помечая их как "прочитанные".

<div class="container" on-content-scroll="_scrollHandler">
    <iron-scroll-threshold id="threshold" scroll-target="mlist" lower-threshold="500" on-lower-threshold="_loadMoreData"></iron-scroll-threshold>
    <iron-list items="[[messages]]" id="mlist" as="m">
        <template>
            <div>
                <p>[[m.message]]</p>
            </div>
        </template>
    </iron-list>
</div>

Обработчик _scrollHandler однако никогда не увольняют.

Что будет необходимо для получения события после завершения прокрутки?

Answer 1

Это работает в конце, двигаясь on-scroll="_scrollHandler" к iron-list:

<div class="container">
    <iron-scroll-threshold id="threshold" scroll-target="mlist" lower-threshold="500" on-lower-threshold="_loadMoreData"></iron-scroll-threshold>
    <iron-list items="[[messages]]" id="mlist" as="m" on-scroll="_scrollHandler">
        <template>
            <div>
                <p>[[m.message]]</p>
            </div>
        </template>
    </iron-list>
</div>

С функцией:

_scrollHandler: function() {
    this.debounce("markAsRead", function(e) {
        console.log("debounce");
    }, 500);
}

Редактировать:

В случае, если iron-scroll-threshold оборачивает iron-listнужно двигаться on-scroll к iron-scroll-threshold-элемент:

<iron-scroll-threshold on-scroll="_scrollHandler" id="threshold" on-lower-threshold="_loadMore">
    <iron-list scroll-target="threshold">...</iron-list>
</iron-scroll-threshold>

Answer 2

Вам нужен стиль: overflow: auto на div.container, Это обеспечит запуск события прокрутки.

Я не смог найти ни одного такого события, как content-scroll, но с учетом вышеуказанных изменений вы сможете изменить свой HTML-код для привязки к обработчику, например: on-scroll="_scrollHandler",

Чтобы определить, остановилась ли прокрутка, я бы рекомендовал использовать Polymer.debounce, чтобы обратный вызов установил isScrolling состояние ложно, как:

app._scrollHandler = function (e) {
    app.isScrolling = true
    app.debounce('scroll-handler', _ => {
        app.isScrolling = false
    }, 20)
}