iron-scroll-threshold不支持app-header-layout

Question

我似乎无法让iron-scroll-threshold在app-header-layout中使用iron-list。

请注意，出于与一些第三方组件的兼容性原因，我仍然使用聚合物1 (1.11.3)。

下面是一个简化的代码示例：

<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>

我想滚动进去的元素是：

<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

我只是偶然找到了解决方案(第x次是通过reading the docs )：

<iron-scroll-threshold scroll-target="document" id="threshold" on-lower-threshold="_loadMoreData">

scroll-target="document"是缺失的部分。

编辑1个

等等..。我有两个元素，分别是ìron-list和iron-scroll-threshold，在这两个元素上都设置了scroll-target="document"。

现在的效果是，当我滚动其中一个元素时，两个元素都会触发_loadMoreData方法。真奇怪。

编辑2

我破解了一个似乎可以“修复”这个问题的变通方法：

定义此函数：

function resetDocumentScrollers() {
    var ist = document.querySelectorAll("iron-scroll-threshold");
    [].forEach.call(ist, function(e) {
        e.scrollTarget = null;
    });
}

在每个元素的自定义init()方法中，我调用：

resetDocumentScrollers();
this.$.threshold.scrollTarget = "document";

多丑陋啊。