javascript - 当滚动条位于shadow-dom之外时，分部分加载 polymer iron-list

Question

我的 polymer 应用程序使用应用程序布局结构。根元素可以简化如下:

<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不起作用)并执行iron-resize时，所有其他项目都会显示，lastVisibleIndex是最后一个索引。

Answer 1

我认为您需要获得正确的 scrollTarget 因为您的方法无法正确工作。您需要找到 app-header 元素并获取其自己的 scrollTarget:

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