Загрузка железного списка полимеров по частям, когда полоса прокрутки находится вне shadow-dom

Question

Мое Polymer-приложение использует app-layout-структуру. Корневой элемент может быть упрощен следующим образом:

<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 эта страница отображается. На одной странице перечислено много элементов, которые я хочу добавить в <железный список>.

У меня возникают проблемы с изменением размера при прокрутке, поскольку полоса прокрутки находится в родительском элементе родительского элемента.

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

Я застрял в списке, показывающем количество попаданий со смещением прокрутки, и больше никогда не загружаюсь. Свойства firstVisibleIndex (0) и lastVisibleIndex (8, количество отображаемых элементов, меньше, чем scroll-offset) остаются неизменными. Когда я устанавливаю 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;
}