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.
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/84c6fd48-214b-4777-a3c3-ef6a9995a0d7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
