Description
I'm trying to use the iron-scroll-threshold combined with iron-list.
When I open up the page that has the list, on-lower-threshold is fired. Nothing happens as I scroll the list.
I have the following file structure:
- index.html (has a
body tag that encapsulates <my-app> element).
- my-app.html (has an
app-drawer layout + app-header-layout and the declared <iron-pages> inside it).
- person-list.html (one of the previously declared
iron-pages. Has the iron-ajax the populates the iron-list that its encapsulated by iron-scroll-threshold.
index.html:
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<my-app></my-app>
</body>
my-app.html has nothing specific regarding css heights or layouts, only the display:block value:
:host {
--app-primary-color: #002F5B;
--app-secondary-color: black;
display: block;
}
person-list.html:
:host {
padding: 10px;
display: block;
@apply(--paper-font-common-base);
}
iron-list {
height: 90vh;
}
<iron-scroll-threshold id="threshold"
lower-threshold="100"
on-lower-threshold="loadMoreData"
lower-triggered="{{nearBottom}}">
<iron-list id="personlist" scroll-target="threshold" items="[[persons]]" as="item" hidden$="[[!storedUser.loggedin]]" selection-enabled>
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]">
<div class="pad">
<div class="primary-text" hidden$="[[item.apelido]]">[[item.nome]]</div>
</div>
</div>
</div>
</template>
</iron-list>
</iron-scroll-threshold>
loadMoreData: function() {
console.log('test');
}
I didn't declared any div for the iron-scroll-threshold. It's just: dom > template > style > ajax > iron-scroll > iron-list.
Expected outcome
The scroll to the near bottom of the list should fire the function loadMoreData.
Actual outcome
The function is fired when I load the page, and nothing else happens. The scroll is not triggering the on-lower-threshold.
I'm following the documentation:
https://www.webcomponents.org/element/PolymerElements/iron-scroll-threshold
... and as far as I know, the example matches what I just coded.
Description
I'm trying to use the iron-scroll-threshold combined with iron-list.
When I open up the page that has the list, on-lower-threshold is fired. Nothing happens as I scroll the list.
I have the following file structure:
bodytag that encapsulates<my-app>element).app-drawer layout+app-header-layoutand the declared<iron-pages>inside it).iron-pages. Has the iron-ajax the populates theiron-listthat its encapsulated byiron-scroll-threshold.index.html:
my-app.html has nothing specific regarding css heights or layouts, only the display:block value:
person-list.html:
I didn't declared any div for the iron-scroll-threshold. It's just: dom > template > style > ajax > iron-scroll > iron-list.
Expected outcome
The scroll to the near bottom of the list should fire the function loadMoreData.
Actual outcome
The function is fired when I load the page, and nothing else happens. The scroll is not triggering the on-lower-threshold.
I'm following the documentation:
https://www.webcomponents.org/element/PolymerElements/iron-scroll-threshold
... and as far as I know, the example matches what I just coded.