将`<iron-list>`与`<paper-scroll-header-panel>`结合起来

Question

<paper-scroll-header-panel>（animateWithDuration:animations）需要固定的高度，而另一方面<div>（Merge Tool Configuration，docs）需要{{1}}高度超过可用高度，因此允许您在滚动时折叠标题。如何将铁列表正确地重新计算（手动调整大小并触发调整大小事件？：S），同时标题变小？

Answer 1

请考虑以下布局。只要iron-list的父级 - paper-scroll-header-panel拥有fit选择器，它就可以在不做任何额外工作的情况下工作。

<paper-scroll-header-panel class="fit" condenses keep-condensed-header>
  <paper-toolbar class="tall">
  </paper-toolbar>
  <iron-list items="[[data]]">

这是因为 -

  

铁列表必须以明确的大小，或委托滚动到   明确大小的父级。通过＆＃34;明确定义＆＃34;，我们的意思是它具有   通过类或内联样式设置的显式CSS高度属性，或   else通过其他布局方式（例如flex或fit类）来确定大小。

您可以在official document中阅读此内容，并查看此live demo，并将这两项工作结合起来。