스크롤 막대가 섀도우 - 돔 외부에있을 때 부품에 철 - 목록로드

Question

내 Polymer-application은 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 (철 페이지, app-header-layout이 작동하지 않음)을 설정하고 철 크기 조정을 실행하면 다른 모든 항목이 표시됩니다. lastVisibleIndex는 마지막 색인입니다.

Answer 1

나는 당신이 올바르게 작동하지 않는다는 이유로 scrollTarget이 필요하다고 생각합니다. 당신은 app-header 요소를 찾아 얻을 필요가 자신의 scrollTarget : 설치 plunkr 또는 jsbin 할 수 있다면

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