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.