CODEWITHSUNDEEP
javascripthtmlpolymer
Kaung Myat Lwin
Kaung Myat Lwin

Reputation: 1099

iron-scroll-threshold on an iron-page

I'm having troubles using iron-scroll-threshold along with an iron-page which shares the same host as other pages.

My application UI has paper-tabs on top. Pages are loaded lazily as the tabs change. One of the pages contain large amount of AJAX data from an endpoint so I have to implement scroll pagination on it.

My problem is, I'm trying to get iron-scroll-threshold to fire in that particular page (which shares same dom scroll as other pages). I know I can consider using iron-list with an explicit height for the page, but I don't want to since it breaks my app's UX by adding automatically two overflow.

My question is, how do I fire on-lower-threshold whenever I reach the bottom of a particular iron-page? I tried using it with dom-repeat by following.

    <iron-scroll-threshold
          lower-threshold="100"
          on-lower-threshold="loadMoreData"
          scroll-target="itemlist"
          >
      <template is="dom-repeat" items="[[data]]" as="list" id="itemlist">
        <a href="[[list.id]]">
          <p>[[list.name]]</p>
        </a>
      </template>
    </iron-scroll-threshold>

Another problem I face is it automatically fires the event before ajax call is completed. After that, even if the dom has loaded, it never fired again.

You can ask me more specific questions if you're not clear. Happy new year folks!

Upvotes: 3

Views: 538

Answers (1)

tony19
tony19

Reputation: 138266

Your <iron-scroll-threshold>.scrollTarget setting should be removed because the <iron-scroll-threshold> itself is the scroll target in this case.

You could create a custom page element that includes the <iron-scroll-threshold> as the item container. Make sure to set its height to 100%.

<dom-module id="x-page">
  <template>
    <style>
      :host {
        display: block;
        height: 100%;
      }
      iron-scroll-threshold {
        height: 100%;
        overflow: auto;
      }
    </style>
    <iron-scroll-threshold lower-threshold="100"
                           on-lower-threshold="_loadMoreData">
      <template is="dom-repeat" items="[[items]]">
        <div>[[index]]: [[item]]</div>
      </template>
    </iron-scroll-threshold>
  </template>
</dom-module>

codepen

Upvotes: 1

Related Questions