如何将 <iron-scroll-threshold> 滚动目标设置为 Polymer Starter Kit 的“文档”答案

【问题标题】：How to set <iron-scroll-threshold> scroll-target to "document" for Polymer Starter Kit如何将 <iron-scroll-threshold> 滚动目标设置为 Polymer Starter Kit 的“文档”
【发布时间】：2018-06-13 14:57:45
【问题描述】：

我打算通过将scroll-target 设置为"document" 来实现与PSK v3 一起使用的无限滚动器，但它不适用于PSK。下面是代码sn-p：

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

我已经用纯 HTML 测试了scroll-target="document"，它运行良好。我想知道当用户滚动到特定页面/视图的末尾时，应该如何设置 PSK 来触发事件。

【问题讨论】：

标签： polymer polymer-starter-kit

【解决方案1】：

显然，您需要在ready()中使用以下代码将<iron-scroll-threshold>的scroll-target设置为<app-header>的scroll-target：-

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

【讨论】：

【解决方案2】：

有时，您的滚动位置在开始时比queryMoreData 函数触发的位置足够低。在这个函数中，你需要通过在queryMoreData函数中调用clearTriggers方法来清除阈值：

queryMoreData() {
    //check if you have more data to load than

    ironScrollTheshold.clearTriggers();
}

之后，假设可滚动区域中的内容已经增长，它将再次开始侦听滚动位置以再次达到阈值。

【讨论】：

在我之前的示例中，我实际上调用了this.$.threshold.clearTriggers() 来清除queryMoreData() 函数中的触发器。似乎问题在于错误的滚动目标，因为 PSK 的结构中还有其他可滚动元素，例如 app-drawer-layout/app-header-layout（我不太确定）

【解决方案3】：

您必须将iron-scroll-threshold 元素的scroll-target 属性设置为“document”。

另请注意，iron-list 的 scroll-target 属性设置为 iron-scroll-threshold 元素的 id - 'threshold'。

<iron-scroll-threshold scroll-target="document" id="threshold" on-lower-threshold="loadMoreData" lower-threshold="100">
<iron-list id="list" items="[[items]]" as="item" scroll-target="threshold" grid>
<!-- template -->
</iron-list>
</iron-scroll-threshold>

【讨论】：