Loading polymers iron-list in parts, when scrollbar is outside shadow-dom

Question

My Polymer-application uses the app-layout-structure. The root-element can be simplified as follows:

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

When a meny-option is clicked, that page is displayed. One page lists many items that I want in an < iron-list >.

I'm having problems getting it resized when scrolling as the scrollbar is in the parent of it's parent.

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

I am stuck at having the list showing the scroll-offset number of hits, and never loading more. Properties firstVisibleIndex (0) and lastVisibleIndex (8, number of items shown, less then scroll-offset) remains the unchanged. When I set iron-list.scrollTarget (iron-pages, app-header-layout didn't work) and fire iron-resize all other items are shown, lastVisibleIndex is last index.

Answer 1

I think you need to get a right scrollTarget cause your approach doesn't work correct. You need to find app-header element and get its own scrollTarget :

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