Question

我尝试在iron-list iron-scroll-threshold内使用app-header-layout（和has-scrolling-region）。

我使用polymer-CLI生成了基本的app布局。

如果我不在has-scrolling-region上使用app-header-layout，并在"document"上使用scroll-target iron-list，那就有用了。但是使用这个解决方案，滚动条属于窗口，并且不会在标题下滑动，我显然无法获得漂亮的＆＃34;瀑布＆＃34;通常与这些布局相关联的行为。

因此，我在has-scrolling-region上使用了app-header-layout，但是将相应的scoller传递给scroll-target的{{1}}属性的正确方法是什么？

iron-list

我研究了 <app-header-layout has-scrolling-region id="layout"> <app-header condenses reveals effects="waterfall"> <app-toolbar> <paper-icon-button icon="menu" drawer-toggle></paper-icon-button> <div title>Twiamo</div> </app-toolbar> </app-header> <iron-pages role="main" selected="[[page]]" attr-for-selected="name" id="page"> <my-iron-list name="view1" scroll-target="[[_getScrollTarget()]]"></my-iron-list> <my-view2 name="view2"></my-view2> <my-view3 name="view3"></my-view3> </iron-pages> </app-header-layout>的实现以找到正确的元素。这个表达式实际上产生了正确的元素，一切正常。

app-header-layout

但是必须有更好的，正确的方法吗？抓住_getScrollTarget: function() { return this.$.layout.shadowRoot.querySelector("#contentContainer"); }的影子DOM并没有完全使用＆＃34;公共界面＆＃34;！

要完成此示例，请参阅app-header-layout的代码。 my-iron-list包裹和铁列表，My-iron-list和一些虚拟数据提供程序的东西。 iron-scroll-theshold上的scroll-target只是传递给my-iron-list中的iron-list和iron-scroll-threshold：

my-iron-list

Answer 1

我和你有同样的问题，因为我现在最干净的是使用app-header scrollTarget。

在您的情况下，移动将app添加到app-header

 <app-header condenses reveals effects="waterfall" id="header">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div title>Twiamo</div>
      </app-toolbar>
 </app-header>

然后代替

_getScrollTarget: function() {
    return this.$.layout.shadowRoot.querySelector("#contentContainer");        
}

只需使用scrollTarget属性

_getScrollTarget: function() {
    return this.$.header.scrollTarget;     
}

如果您发现了更好的方式让我知道。

干杯，

Answer 2

我在同样的问题上挣扎。当我使用iron-scroll-target-behavior而不是iron-scroll-threshold时，我仍然需要将滚动目标引用传递给app-layout-header内的元素。

如果has-scrolling-region为真，则app-header-layout将滚动目标设置为ID为#contentContainer的内部div。您可以将此div作为目标并将其作为滚动目标传递给您的铁列表。

您只需要更改原始代码中的_getScrollTarget函数。

_getScrollTarget: function() {
    return this.$.layout.$.contentContainer;     
}

希望它有所帮助！

Answer 3

如果有人在2017年来这里寻求答案，我只是让你知道Polymer 2.0中仍存在同样的问题。

我能够通过在我的app shell中使用以下代码来克服这个问题（例如PSK的my-app.html）：

首先，在app-header-layout元素上添加'layout'的id属性。

接下来，将其添加到您的Polymer类（在my-app.html等效文件中）：

static get properties() {
  return {
    scrollTarget: HTMLElement,
  }
}

ready() {
  super.ready();
  this.scrollTarget = this.$.layout.shadowRoot.querySelector("#contentContainer");
}

然后，将属性传递给延迟加载页面上的scroll-target属性：

<my-page scroll-target="[[scrollTarget]]"></my-page>

最后，在你的延迟加载的页面中（例如我的页面）：

<iron-list scroll-target="[[scrollTarget]]"></iron-list>

...

static get properties() {
  return {
    scrollTarget: HTMLElement,
  }
}

这不是一个理想的解决方案，但它确实有效。

如何使用has-scrolling-region

3 个答案: