聚合物事件on-content-scroll沒有觸發

Question

我有一個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從未被解僱。

在滾動結束後獲取事件需要什麼？

Answer 1

它通過移動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> 

Answer 2

您需要div.container的款式：overflow: auto。這將確保滾動事件將被調用。

我無法找到任何這樣的事件爲content-scroll，不過看上面的變化應該能夠改變你的HTML綁定對像處理程序：on-scroll="_scrollHandler"。

要檢測滾動停止，我會建議使用Polymer.debounce有回調設置isScrolling狀態爲假像：

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