当滚动条在 shadow-dom 之外时，部分加载聚合物铁列表答案

【问题标题】：Loading polymers iron-list in parts, when scrollbar is outside shadow-dom当滚动条在 shadow-dom 之外时，部分加载聚合物铁列表
【发布时间】：2017-04-05 17:37:35
【问题描述】：

我的 Polymer 应用程序使用 app-layout-structure。根元素可以简化如下：

<app-drawer-layout fullbleed>
  <app-drawer swipe-open>
    <iron-selector selected="{{page}}" attr-for-selected="name" role="navigation">
      <!-- list of Side Menu options -->
    </iron-selector>
  </app-drawer>
  <app-header-layout has-scrolling-region>
    <app-header fixed effects="waterfall">
      <!-- Top Menu -->
    </app-header>
    <iron-pages role="main" selected="[[page]]" attr-for-selected="name">
      <!-- Here is custom elements that can be selected via Menu -->
    </iron-pages>
  </app-header-layout>
</app-drawer-layout>

单击菜单选项时，将显示该页面。一页列出了许多我想要在中的项目。

我在滚动时无法调整大小，因为滚动条位于其父级的父级中。

ready: function(){
  //this is the app-header-layout element from the root
  this.$.ironList.scrollTarget = this.parentNode.parentNode;
},

我一直坚持让列表显示点击次数的滚动偏移量，并且永远不会加载更多。属性 firstVisibleIndex (0) 和 lastVisibleIndex (8, 显示的项目数，小于滚动偏移量) 保持不变。当我设置 iron-list.scrollTarget（iron-pages，app-header-layout 不起作用）并 fire iron-resize 显示所有其他项目时，lastVisibleIndex 是最后一个索引。

【问题讨论】：

如果你能设置一个 plunkr 或 jsbin 会很容易提供帮助

标签： javascript polymer shadow-dom iron-list

【解决方案1】：

我认为您需要获得正确的scrollTarget，因为您的方法不正确。你需要找到app-header元素并获得它自己的scrollTarget：

ready: function(){
   //get parent node and query app-header
   this.$.ironList.scrollTarget = this.domHost.$$('app-header').scrollTarget;
}

【讨论】：