How to set the scroll-target in the iron list in the layout of the header application using the scroll pane

Question

I am trying to use iron-list(s iron-scroll-threshold) in app-header-layouts has-scrolling-region.

I created a basic application layout using polymer-CLI.

If I do not use has-scrolling-regionin app-header-layoutand use "document"for scroll-targeton iron-list, this works. But with this solution, the scrollbar belongs to the window and does not slide under the heading, and I obviously cannot get the nice “waterfall” behavior that is usually associated with these types of layouts.

So I use has-scrolling-regionin app-header-layout, but what is the correct way to pass the appropriate scoller to a property scroll-target iron-list?

  <!-- Main content -->
  <app-header-layout has-scrolling-region id="layout">
    <app-header condenses reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>Twiamo</div>
      </app-toolbar>
    </app-header>

    <iron-pages role="main" selected="[[page]]" attr-for-selected="name" id="page">
      <my-iron-list name="view1" scroll-target="[[_getScrollTarget()]]"></my-iron-list>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
    </iron-pages>
  </app-header-layout>

app-header-layout, . , .

_getScrollTarget: function() {
    return this.$.layout.shadowRoot.querySelector("#contentContainer");        
}

, ? DOM app-header-layout " "!

, my-iron-list. my-iron-list wraps iron-list, iron-scroll-theshold . scroll-target my-iron-list iron-list iron-scroll-threshold my-iron-list:

<dom-module id="my-iron-list">
  <template>
    <iron-list items="[]" as=item id="list" scroll-target="[[scrollTarget]]">
      <template>
        <div class="item">[[item]]</div>
      </template>
    </iron-list>

    <iron-scroll-threshold
        id="scrollTheshold"
        lower-threshold="100"
        on-lower-threshold="_loadMoreData"
        scroll-target="[[scrollTarget]]">      
    </iron-scroll-threshold>    
  </template>

  <script>
    Polymer({

      is: 'my-iron-list',

      properties: {
        page: {
            type : Number,
            value : 0
        },
        perPage: {
            type : Number,
            value : 100
        },
        scrollTarget: HTMLElement,
      },

      _pushPage: function() {
          for (i = 0; i < this.perPage; i++) {
            this.$.list.push('items', 'Entry number ' + (i+1+this.page*this.perPage));   
          }
      },

      _loadMoreData: function() {
          this._pushPage();
          this.page = this.page + 1;
          this.$.scrollTheshold.clearTriggers();
      }
    });
  </script>
</dom-module>

Answer 1

, , anwser, , URL- app-header.

move id

 <app-header condenses reveals effects="waterfall" id="header">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>Twiamo</div>
      </app-toolbar>
 </app-header>

_getScrollTarget: function() {
    return this.$.layout.shadowRoot.querySelector("#contentContainer");        
}

scrollTarget

_getScrollTarget: function() {
    return this.$.header.scrollTarget;     
}

, .

,

Answer 2

. iron-scroll-target-behavior iron-scroll-threshold, app-layout-header.

has-scrolling-region , app-header-layout div #contentContainer. div .

_getScrollTarget .

_getScrollTarget: function() {
    return this.$.layout.$.contentContainer;     
}

, !

Answer 3

- 2017 , , Polymer 2.0.

, (, PSK my-app.html):

-, id 'layout' app-header-layout.

Polymer ( my-app.html):

static get properties() {
  return {
    scrollTarget: HTMLElement,
  }
}

ready() {
  super.ready();
  this.scrollTarget = this.$.layout.shadowRoot.querySelector("#contentContainer");
}

scroll-target :

<my-page scroll-target="[[scrollTarget]]"></my-page>

, (, ):

<iron-list scroll-target="[[scrollTarget]]"></iron-list>

...

static get properties() {
  return {
    scrollTarget: HTMLElement,
  }
}

, .