聚合物事件内容滚动不触发

Question

我有一个 iron-list，我在使用 iron-scroll-threshold 滚动到底部时向其中添加了新项目。效果不错。

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

我需要知道列出的项目 (m.message) 是否已被用户看到，方法是检查哪些项目当前在视口中可见滚动后，然后将它们标记为 "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>

然而，处理程序 _scrollHandler 从未被触发。

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

Answer 1

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

我找不到任何像 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>

聚合物事件内容滚动不触发

Polymer event on-content-scroll not firing

polymer

iron-list