1

我有一个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永远不会被解雇。

滚动结束后获取事件需要什么？

4

2 回答 2

2

您需要样式：overflow: auto在div.container. 这将确保滚动事件将被调用。

我找不到任何这样的事件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)
}
于 2017-03-07T21:40:00.353 回答
0

它最终通过移动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-element：

<iron-scroll-threshold on-scroll="_scrollHandler" id="threshold" on-lower-threshold="_loadMore">
    <iron-list scroll-target="threshold">...</iron-list>
</iron-scroll-threshold>
于 2017-03-07T22:37:00.280 回答