How to set <iron-scroll-threshold> scroll-target to "document" for Polymer Starter Kit

Question

I intend to implement an infinite scroller using with PSK v3 by setting the scroll-target to "document", but it just doesn't work for PSK. Below is the code snippet:

<iron-scroll-threshold id="threshold"
    scroll-target="document"
    on-lower-threshold="queryMoreData">
  <iron-list items="[[items]]" grid>
    <template>
      <div>
        <div class="content">
          item: [[item.n]]
        </div>
      </div>
    </template>
  </iron-list>
</iron-scroll-threshold>

I have tested scroll-target="document" with plain HTML, and it's working nicely. I want to know how should it be set for PSK to trigger an event when user scroll to the end of a particular page/view.

Answer 1

Apparently, you need to set the scroll-target of <iron-scroll-threshold> to the scroll-target of <app-header> with the following code in ready():-

ready() {
  { // Set scroll target for <iron-scroll-threshold>
    let myApp = document.querySelector('my-app');
    let appHeader = myApp.shadowRoot.querySelector('app-header');

    this.$.threshold.scrollTarget = appHeader.scrollTarget;
  }
}