Polymer 铁卷轴阈值不适用于应用程序标题布局

我似乎无法在

应用程序标题布局中获得
铁卷轴阈值
处理
铁列表

请注意，出于与某些第三方组件兼容的原因，我仍然使用聚合物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>


[[数据]]

聚合物({
是：“时间线”，
特性：{
页码：{
类型：数字，
值：-1
},
数据：{
类型：数组，
值：[]
}
},
init:function（）{
此参数为0.pagee=0；
this.$.loadData.params={“page”：this.pagee}；
这是$.loadData.generateRequest（）；
},
数据加载：函数（e）{
如果（！this.datas）this.datas=[]；
如果（e.detail.response.length>0）{
e、 detail.response.forEach（函数（元素）{
这个.push（“数据”，元素）；
}.约束（这个）；
此.$.threshold.clearTriggers（）；
}
},
_loadMoreData:函数（）{
这个.pagee++；
this.$.loadData.params={“page”：this.pagee}；
这是$.loadData.generateRequest（）；
}
});
我只是意外地（第x次）找到了解决方案：

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

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

真难看

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

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