複数のポリマー鉄スクロールスレッショルドでより多くのデータを読み込み、要素の可視性を検出

Question

メッセージのリストを表示するカスタム要素があります。

ユーザーがスクロールダウンし、新しいメッセージをロードするタスクがあるiron-listラップ1 iron-scroll-thresholdあり：

<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> 

正常に動作します。

2番目の種類のスクロールリスナーが必要になります。メッセージが表示されるとすぐに（ビューポートにスクロールされて）メッセージを読み取り済みとしてマークする必要があります。これは、新しいメッセージの読み込みとは独立して行われます。

この目的で2番目のiron-scroll-thresholdを追加することは可能ですか、それを達成するより良い方法はありますか？

編集

私はいくつかの要素にon-content-scrollを入れてみましたが、イベントはトリガーの取得することはありません。

Answer 1

iron-listをiron-scroll-threshold要素&とラップしないと、scroll-target-attributeが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％ないんだけど...しかし、私は簡単に見て何も表示されません。ソースを介して。

Answer 2

あなたはまた、あなたがやりたいことについて、とにかく最良のアプローチであるとは確信していません...別のアプローチは、How to tell if a DOM element is visible in the current viewport?の行に沿って、getBoundingClientRectという行に沿ったものかもしれませんが、これは仮想リストですが、これは簡単ではありません。

鉄リストリスト公共firstVisibleIndex & lastVisibleIndex命名されるように表示される2つのゲッターを持っているので、ラフな考えはあなたのメッセージがときどきユーザーがスクロールとしてその範囲内にあるかどうかをチェックできることです。