如何使用 has-scrolling-region 在 app-header-layout 中的铁列表上设置滚动目标

Question

我正在尝试在with 中使用iron-list(and iron-scroll-threshold) 。app-header-layouthas-scrolling-region

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

如果我不使用has-scrolling-region的app-header-layout，并使用"document"了scroll-target在iron-list它还挺工作。但是使用这个解决方案，滚动条属于窗口并且不会在标题下方滑动，我显然无法获得通常与这些类型的布局相关联的漂亮的“瀑布”行为。

因此，我使用has-scrolling-regionon app-header-layout，但是将相应的 scoller 传递给 的scroll-target属性的正确方法是iron-list什么？

  <!-- 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");        
}

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

为了完成这个例子，这里是我的my-iron-list. My-iron-listwraps 和 iron-list，iron-scroll-theshold以及一些虚拟数据提供者的东西。在scroll-target上my-iron-list只是传递到iron-list和iron-scroll-threshold中my-iron-list：

<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

我和你有同样的问题，目前我最干净的答案是使用应用程序标题滚动目标。

在您的情况下，将 id 添加到应用程序标头

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

如果您发现更好的方法请告诉我。

干杯，