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>