多聚合物鐵滾動閾值來加載更多的數據和檢測元素的可見度

我有一個自定義元素顯示消息列表。多聚合物鐵滾動閾值來加載更多的數據和檢測元素的可見度

有一個iron-scroll-threshold包裝的iron-list具有裝載新郵件用戶向下滾動的任務：

<div class="container"> 
    <iron-scroll-threshold id="t" lower-threshold="500" on-lower-threshold="_ld"> 
     <iron-list items="[[messages]]" as="m" scroll-target="t"> 
      <template> 
       <div> 
        <!-- Messages markup here --> 
       </div> 
      </template> 
     </iron-list> 
    </iron-scroll-threshold> 
</div>

這工作正常。

我需要第二種滾動偵聽器將消息標記爲只要它們變爲可見（滾動到視口中）即可閱讀。這應該獨立於加載新消息而發生。

是否可以爲此添加第二個iron-scroll-threshold或者是否有更好的方法來實現該目的？

編輯

我試圖把幾個元素的on-content-scroll但該事件從未得到的解僱。

來源

2017-03-05 yglodt

我相信通過使用iron-scroll-threshold的scroll-target屬性不包裝iron-list和iron-scroll-threshold元素&是可能的。因此，像這樣：

<div class="container"> 
    <iron-scroll-threshold id="t1" scroll-target="list" lower-threshold="500" on-lower-threshold="_ld"/> 
    <iron-scroll-threshold id="t2" scroll-target="list" lower-threshold="500" on-lower-threshold="_ld2"/> 
    <iron-list id="list" items="[[messages]]" as="m"> 
     <template> 
      <div> 
       <!-- Messages markup here --> 
      </div> 
     </template> 
    </iron-list> 
</div>

我不是100％是不會有某種具有多鐵滾動的閾值意想不到的互動......但我沒有看到任何與快速查看通過來源。

來源

2017-03-06 20:54:49 sfeast

謝謝，這看起來不錯。我試過了:)當元素初始加載時，_ld和_ld2都會被觸發（注意，如果只有一個iron-scroll-threshold存在，初始加載也是這種情況），這無論如何都是奇怪的。然後當我滾動時，只有_ld被觸發，並且_ld2從不。 – yglodt

聽起來可能會發生一些我在掃描代碼時沒有想到的相互作用。我現在無法進一步調查（例如，沒有時間），但似乎是一個合理的錯誤文件上的鐵滾動閾值回購 - https://github.com/PolymerElements/iron-scroll-threshold – sfeast

你也知道不知道上面會是最好的辦法，反正你想要做什麼......另一種方法可能是使用getBoundingClientRect東西，沿着How to tell if a DOM element is visible in the current viewport?線，但由於上下文這裏涉及鐵名單，這是一個虛擬列表，這不是直截了當的。

iron-list list確實有兩個似乎是公開命名的getter，名爲firstVisibleIndex & lastVisibleIndex所以一個粗略的想法是，你可以在用戶滾動時偶爾檢查你的消息是否在該範圍內。

來源

2017-03-07 19:26:57 sfeast

多聚合物鐵滾動閾值來加載更多的數據和檢測元素的可見度

回答

相關問題