多個聚合物鐵滾動閾值可加載更多數據並檢測元素可見性

Question

我有一個顯示消息列表的自定義元素。

有一個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 ，但事件從未被觸發。

Answer 1

我相信，可以通過不使用iron-scroll-threshold元素包裝iron-list並使用iron-scroll-threshold的scroll-target屬性來實現。 所以像這樣：

<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％不會發生具有多個Iron-scroll-thresholds的某種意外交互...但是我看不到任何快速瀏覽源代碼的信息。

Answer 2

您還知道不確定上述方法對於您想做的事情仍然是最好的方法。另一種方法可能是使用getBoundingClientRect ，以及如何判斷DOM元素在當前視口中是否可見？ ，但是由於此處的上下文涉及鐵列表（這是一個虛擬列表），因此這並不簡單。

iron-list列表確實有兩個似乎是公共的getter，分別名為firstVisibleIndex和lastVisibleIndex，因此粗略地考慮到您可以在用戶滾動時檢查消息是否偶爾在該范圍內。