CODEWITHSUNDEEP
polymer
Azrim
Azrim

Reputation: 51

Polymer: How to use iron-scroll-threshold in Polymer 2

I want to use iron-scroll-threshold element, to load more data when i scroll, but an example that i found at webcomponents seems not to work. It doesnt return anything at console.This is my code:

<iron-scroll-threshold lower-threshold="400" on-lower-threshold="loadMoreData" id="threshold">
  <iron-list scroll-target="threshold" items="[[ajaxResponse]]" as="item">
    <template>
      <div>[[item.name]]</div>
    </template>
  </iron-list>
</iron-scroll-threshold>

my function: loadMoreData() { 
    console.log("Inside ..."); 

    asyncStuff(function done() { 
        ironScrollTheshold.clearTriggers(); 
    }
);

Upvotes: 1

Views: 424

Answers (1)

dshukertjr
dshukertjr

Reputation: 18740

Iron-threshold seems to have a lot of problems as described here: https://github.com/PolymerElements/iron-scroll-threshold/issues/23

I suggest not using it and just implement a scroll event listener of your own kind of like this:

    const lowerThreshold = 500
    window.addEventListener('scroll', function(e) {
      var body = document.body // For Chrome, Safari and Opera
      var html = document.documentElement // Firefox and IE
      var documentHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight )
      var windowHeight = window.innerHeight
      var bodyScrollBottom = documentHeight - windowHeight - body.scrollTop
      var htmlScrollBottom = documentHeight - windowHeight - html.scrollTop

      //to take in account for difference browsers
      if( bodyScrollBottom < lowerThreshold ){
        //below the threshold. Do something
        //for Chrome, Safari and Opera
      }else if( htmlScrollBottom < lowerThreshold){
        //below thre threshold. Do something
        //for Firefox and IE
      }
    })

Upvotes: 1

Related Questions