Handling scrolling using iron-scroll-threshold in Polymer 2.0 for scroll-target = document

13 views
Skip to first unread message

Sachin Naik

unread,
Jan 15, 2018, 5:21:49 AM1/15/18
to Polymer
 I am trying to handle scroll threshold events. Using following lines of code.
<!--   Code  -->
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-scroll-threshold/iron-scroll-threshold.html">  

<dom-module id="documentscroll-app">
  <template>
    <style>
      :host {
        display: block;
      }
      iron-scroll-threshold {
            display: none;
          }
    </style>
    
    <h2>Hello [[prop1]]!</h2>
    <!-- scroll-target uses the document scroll -->
    <iron-scroll-threshold id="scrollThreshold"
    scroll-target="document"
    lower-threshold="500"
    on-lower-threshold="loadMoreData">
  </iron-scroll-threshold>
    <h4>
       XXXXXXX
      MORE LINES TILL SCROLL IS VISIBLE
    </h4>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class DocumentscrollApp extends Polymer.Element {
      static get is() { return 'documentscroll-app'; }
      constructor() {
        console.log("Constructor getting called ");
         super();
        
                    } // End of constructor 
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'documentscroll-app'
          }
        };
      }
      loadMoreData ()
      {
        console.log("Loading more data");
        this.$.scrollThreshold.clearTriggers();

      }
      ready ()
      {
        console.log("Scroll object is READY");
        super.ready();
        this.addEventListener('click', this._onClick);


      }
      _onClick(event) {
       console.log("Click getting called");
     }

    }

    window.customElements.define(DocumentscrollApp.is, DocumentscrollApp);
  </script> 
</dom-module> 
The on-lower-threshold is not getting invoked at all. I have used document as scroll-target. And the component is getting created as expected. Can see messages for "Click" as well. Ideally on reaching the threshold the call back should get invoked. I am not seeing this getting invoked even once. Note :To generate scroll I have added more text content than the one shown in the example.

Reply all
Reply to author
Forward
0 new messages