iron-scroll-threshold not working with app-header-layout - polymer

Question

I seem unable to get iron-scroll-threshold working with an iron-list inside an app-header-layout.
Note that for compatibility reasons with some 3rd party components I still use Polymer 1 (1.11.3).
Here is a reduced code example:
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/app/:view" data="{{routeData}}" tail="{{subRoute}}"></app-route>
<app-route route="{{subRoute}}" pattern="/:id" data="{{idData}}" active="{{onDetailPage}}"></app-route>
<app-drawer-layout>
<app-drawer slot="drawer" swipe-open>
<app-toolbar class="navToolbar">
<a href="/app/foo" drawer-toggle>Menu Item 1</a>
</app-toolbar>
</app-drawer>
<app-header-layout>
<app-header class="mainHeader" condenses fixed effects="resize-title blend-background waterfall" slot="header">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<h4 condensed-title>Summary</h4>
</app-toolbar>
<app-toolbar class="tall">
<h1 main-title>Welcome</h1>
</app-toolbar>
</app-header>
<iron-pages selected="[[routeData.view]]" attr-for-selected="name" fallback-selection="home">
<time-line name="foo"></time-line>
<!-- other elements / pages -->
</iron-pages>
</app-header-layout>
</app-drawer-layout>
The element I want to scroll in is:
<dom-module id="time-line">
<template>
<app-location route="{{route}}"></app-location>
<app-route route="{{route}}" pattern="/app/:view" data="{{routeData}}" tail="{{subRoute}}"></app-route>
<app-route route="{{subRoute}}" pattern="/:id" data="{{idData}}" active="{{onDetailPage}}"></app-route>
<iron-ajax id="loadData" attr="/api/foo" handle-as="json" on-response="dataLoaded"></iron-ajax>
<style is="custom-style"></style>
<iron-scroll-threshold id="threshold" on-lower-threshold="_loadMoreData">
<iron-list id="list" items="[[datas]]" as="data" scroll-target="threshold">
<template>
<div class="layout vertical">
<p>[[data]]</p>
</div>
</template>
</iron-list>
</iron-scroll-threshold>
</template>
<script>
Polymer({
is : "time-line",
properties: {
pagee: {
type: Number,
value: -1
},
datas: {
type: Array,
value: []
}
},
init: function() {
this.pagee = 0;
this.$.loadData.params = { "page" : this.pagee };
this.$.loadData.generateRequest();
},
dataLoaded: function(e) {
if (!this.datas) this.datas = [];
if (e.detail.response.length > 0) {
e.detail.response.forEach(function(element) {
this.push("datas", element);
}.bind(this));
this.$.threshold.clearTriggers();
}
},
_loadMoreData: function() {
this.pagee++;
this.$.loadData.params = { "page" : this.pagee };
this.$.loadData.generateRequest();
}
});
</script>
</dom-module>

Answer 1

I just found the solution by accident (and by reading the docs for the x'th time):
<iron-scroll-threshold scroll-target="document" id="threshold" on-lower-threshold="_loadMoreData">
scroll-target="document" was the missing part.
Edit 1
Wait... I have two elements with ìron-list and iron-scroll-threshold, and on both I have set scroll-target="document".
Now the effect is that, when I scroll in one of those elements, the method _loadMoreData is fired for both elements. Weird.
Edit 2
I hacked a workaround which seems to "fix" the issue:
Define this function:
function resetDocumentScrollers() {
var ist = document.querySelectorAll("iron-scroll-threshold");
[].forEach.call(ist, function(e) {
e.scrollTarget = null;
});
}
And in my custom init() method of every element, I call:
resetDocumentScrollers();
this.$.threshold.scrollTarget = "document";
How ugly.