Chargement de listes de repères de polymères dans des parties, lorsque la barre de défilement est à l'extérieur de shadow-dom

Question

Mon application Polymer utilise la structure app-layout. La racine-élément peut être simplifié comme suit:

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

Lorsqu'un Meny-option est cliqué, cette page est affichée. Une page énumère de nombreux éléments que je veux dans une liste de fer <>.

J'ai des problèmes pour le redimensionner lorsque vous faites défiler la barre de défilement dans le parent de son parent. Je suis bloqué à avoir la liste montrant le nombre de hits de décalage de défilement, et ne chargeant jamais plus. Propriétés firstVisibleIndex (0) et lastVisibleIndex (8, nombre d'éléments affichés, moins que scroll-offset) reste inchangé. Lorsque j'ai défini iron-list.scrollTarget (iron-pages, app-header-layout n'a pas fonctionné) et fire iron-resize tous les autres éléments sont affichés, lastVisibleIndex est le dernier index.

Answer 1

Je pense que vous devez obtenir un droit scrollTarget parce que votre approche ne fonctionne pas correctement. Vous devez trouver l'élément app-header et obtenir son propre scrollTarget:

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