如何使用has-scrolling region在app-header-layout内的iron-list上设置scroll-target

Question

我正在尝试在带有has-scrolling-region的app-header-layout中使用iron-list (和iron-scroll-threshold)。

我使用聚合物CLI生成了基本的应用程序布局。

如果我在app-header-layout上不使用has-scrolling-region，而在iron-list上使用scroll-target的"document"，它就能正常工作。但是使用这种解决方案，滚动条属于窗口，而不是滑动到标题下面，我显然无法获得通常与这些布局相关的良好的“瀑布”行为。

因此，我在app-header-layout上使用has-scrolling-region，但是将相应的搜索器传递给iron-list的scroll-target属性的正确方法是什么呢

  <!-- Main content -->
  <app-header-layout has-scrolling-region id="layout">
    <app-header condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>Twiamo</div>
      </app-toolbar>
    </app-header>

    <iron-pages role="main" selected="[[page]]" attr-for-selected="name" id="page">
      <my-iron-list name="view1" scroll-target="[[_getScrollTarget()]]"></my-iron-list>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
    </iron-pages>
  </app-header-layout>

我研究了app-header-layout的实现，以找到正确的元素。这个表达式实际上给出了正确的元素，一切都很正常。

_getScrollTarget: function() {
    return this.$.layout.shadowRoot.querySelector("#contentContainer");        
}

但是必须有一个更好的，正确的方法？抓取app-header-layout的影子DOM并不完全是在使用“公共接口”！

为了完成这个示例，这里是我的my-iron-list代码。My-iron-list包装和铁列表、iron-scroll-theshold和一些虚拟数据提供程序的东西。my-iron-list上的scroll-target仅传递给my-iron-list中的iron-list和iron-scroll-threshold

<dom-module id="my-iron-list">
  <template>
    <iron-list items="[]" as=item id="list" scroll-target="[[scrollTarget]]">
      <template>
        <div class="item">[[item]]</div>
      </template>
    </iron-list>

    <iron-scroll-threshold
        id="scrollTheshold"
        lower-threshold="100"
        on-lower-threshold="_loadMoreData"
        scroll-target="[[scrollTarget]]">      
    </iron-scroll-threshold>    
  </template>

  <script>
    Polymer({

      is: 'my-iron-list',

      properties: {
        page: {
            type : Number,
            value : 0
        },
        perPage: {
            type : Number,
            value : 100
        },
        scrollTarget: HTMLElement,
      },

      _pushPage: function() {
          for (i = 0; i < this.perPage; i++) {
            this.$.list.push('items', 'Entry number ' + (i+1+this.page*this.perPage));   
          }
      },

      _loadMoreData: function() {
          this._pushPage();
          this.page = this.page + 1;
          this.$.scrollTheshold.clearTriggers();
      }
    });
  </script>
</dom-module>

Answer 1

我和你有同样的问题，现在最干净的办法就是使用app-header scrollTarget。

在您的示例中，将id添加到app-header

 <app-header condenses reveals effects="waterfall" id="header">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>Twiamo</div>
      </app-toolbar>
 </app-header>

然后不再是

_getScrollTarget: function() {
    return this.$.layout.shadowRoot.querySelector("#contentContainer");        
}

只需使用scrollTarget属性

_getScrollTarget: function() {
    return this.$.header.scrollTarget;     
}

如果你发现了更好的方法，请告诉我。

干杯,

Answer 2

我也为同样的问题而苦苦挣扎。虽然我使用的是iron-scroll-target-behavior而不是iron-scroll-threshold，但我仍然需要将滚动目标引用传递给app-layout-header中的元素。

如果has-scrolling-region为真，app-header-layout会将滚动目标设置为一个ID为#contentContainer的内部div。您可以将此div作为目标，并将其作为滚动目标传递给您的iron-list。

您只需要修改原始代码中的_getScrollTarget函数。

_getScrollTarget: function() {
    return this.$.layout.$.contentContainer;     
}

希望它能帮上忙！

Answer 3

如果有人在2017年来这里寻找答案，我只想让你知道，同样的问题在聚合物2.0中仍然存在。

我能够克服这个问题，通过在我的应用程序外壳中有以下代码(例如。PSK的my-app.html)：

首先，在app-header-layout元素上添加一个id属性'layout‘。

接下来，将其添加到您的Polymer类(在您的my-app.html等效类中)：

static get properties() {
  return {
    scrollTarget: HTMLElement,
  }
}

ready() {
  super.ready();
  this.scrollTarget = this.$.layout.shadowRoot.querySelector("#contentContainer");
}

然后，将该属性传递给延迟加载页面上的scroll-target属性：

<my-page scroll-target="[[scrollTarget]]"></my-page>

最后，在你的惰性加载页面中(例如，我的页面)：

<iron-list scroll-target="[[scrollTarget]]"></iron-list>

...

static get properties() {
  return {
    scrollTarget: HTMLElement,
  }
}

这不是一个理想的解决方案，但它是有效的。