当滚动条在shadow-dom外部时，将部分聚合物加载到聚合物iron-list中

Question

我的聚合物应用程序使用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> 

当单击meny选项时，该页面显示。 一个页面列出了我想要的< iron-list>中的许多项目。

我滚动时滚动条位于其父项的父级，因此在调整大小时遇到​​问题。

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是最后一个索引。

Answer 1

我认为你需要得到一个正确的scrollTarget导致你的方法无法正确工作。你需要找到app-header元素，让自己的scrollTarget：

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