Polymer event on-content-scroll not firing

Question

I have an iron-list which I add new items to while scrolling to the bottom using iron-scroll-threshold. That works fine.

What I also need is a general event which is fired when scrolling stops.

I need that to know whether the listed items (m.message) have been seen by the user, by checking which items are currently visible in the view-port after scrolling, and then marking them as "read".

<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>

The handler _scrollHandler is never fired however.

What would be necessary to get an event after scrolling ends?

Answer 1

It works at the end by moving on-scroll="_scrollHandler" to the 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>

With the function being:

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

Edit:

In case the iron-scroll-threshold wraps the iron-list, you need to move on-scroll to the iron-scroll-threshold-element:

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

Answer 2

You need the style: overflow: auto on the div.container. This will make sure the scroll event will invoke.

I could not find any such event as content-scroll, but with the changes above you should be able to change your HTML to bind against the handler like: on-scroll="_scrollHandler".

To detect if scrolling has stopped, I'd recommend using Polymer.debounce to have the callback set the isScrolling state to false like:

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