I am trying to handle scroll threshold events. Using following lines of 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.
Here a working sample for iron-scroll-threshold ;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<test-component></test-component>
<dom-module id="test-component">
<template>
<style>
:host {
display: block;
height: 100%;
}
iron-scroll-threshold {
height: 100%;
overflow: auto;
}
</style>
<iron-ajax auto url= "{{url}}" last-response="{{response}}"></iron-ajax>
<iron-scroll-threshold id="mytras" on-lower-threshold="loadMoreData" lower-threshold="100" scroll-target="document">
<template is="dom-repeat" items="{{response.results}}">
<span> [[index]] : [[item.name.first]] [[item.name.last]]</span><br/><br/><br/>
</template>
</iron-scroll-threshold>
</template>
<script>
class MyTest extends Polymer.Element {
static get is() { return 'test-component'; }
static get properties() { return {
people:{
type:Number,
value:20
}
}};
static get observers() { return ['_url(people)']}
_url(p){
console.log(p);
this.url = "https://randomuser.me/api?results=" + p;
setTimeout(()=> {
this.$.mytras.clearTriggers();
},900)
}
loadMoreData (){
console.log("God call me for every scroll");
this.people += 10;
}
}
customElements.define(MyTest.is, MyTest);
</script>
</dom-module>
</body>
</html>