Question

我有一个iron-list，我使用iron-scroll-threshold滚动到底部时添加新项目。这很好。

我还需要一个在滚动停止时触发的一般事件。

我需要知道所列出的项目（m.message）是否已由用户看到，通过检查滚动后当前在视口中可见的项目，然后标记它们as＆＃34;阅读＆＃34;。

<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

您需要overflow: auto上的样式：div.container。这将确保将调用scroll事件。

我找不到content-scroll这样的事件，但是通过上述更改，您应该能够更改 HTML 以绑定处理程序，例如：on-scroll="_scrollHandler"。

要检测滚动是否已停止，我建议使用Polymer.debounce将回调设置为isScrolling状态为false，如下所示：

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

Answer 2

最后将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>

聚合物事件on-content-scroll not firing

2 个答案: