0

我正在用聚合物开发一个 SPA。我的主要布局使用该app-layout集合在下面创建标题栏和可滚动页面 - 因此

<app-header-layout>
  <app-header>
    <app-toolbar>
      toolbar content ...
    </app-toolbar>
  </app-header>
  <iron-pages ...>
    <page1-element></page1-element>
    ...
    <pagen-element></pagen-element>
  </iron-pages>
<app-header-layout>

我的一个页面是一个大型月历，用于查看约会摘要和预订，当用于预订时，上面会有大量关于所选日期预订的重要信息，以至于正常屏幕 日历的最后几周从屏幕底部消失，我的页面变得可滚动。

this的结构<page-element>是这样的

<section class="day">
  Information which takes up about 1/3 of the screen
</section>
<section class="calendar header">
  <paper-tabs>Tabs for each office</paper-tabs>
  <div>Area to allow selection of month and year, with next and previous buttons</div>
  <ul id="daysofweek">...</ul>
</section>
<section class="calendar">
  Calendar itself in weekly rows
</section>

我想在这个页面上实现的（记住主应用程序工具栏在屏幕顶部保持静态）是

  • class="day" 的部分在屏幕顶部保持静态（在主应用程序工具栏下）
  • 当用户向下滚动页面直到它完全消失时，日历标题选择会折叠 - 但如果用户向上滚动一点点，则只有“daysofweek”行会显示自己（即，滚动效果支持的显示模式<app-header>）
  • 页面的其余部分，日历本身上下滚动，当用户完全向下滚动时，该月的最后一周正好位于页面的底部
  • 当带有 class="day" 的部分不存在时（即有人只是在查看日历，那么这只是向上折叠到零高度，但页面的其余部分如上所述，但具有更大的视口。

我尝试使用嵌套<app-header-layout>，但这似乎只是让我留下了应用程序工具栏，日历的底部填充了屏幕的其余部分并且不可滚动。所以我正在寻找关于如何实现这一点的建议，或者使用聚合物元素，或者自己用 css 来做。

更新

尝试使用paper-scroll-header-panel，但一切都变得不可见。不理想，为什么在 chrome 开发工具中，各种元素放置在页面上的正确位置，但没有出现，我不知道为什么

我还尝试将日历容器元素设置为overflow-y: scroll，但我最终得到了两个垂直滚动条，并且只有外部的滚动条有效（即应用程序一级）。scrollTarget这个实验让我想知道我是否应该尝试玩app-header

4

1 回答 1

0

我最终找到了如何做到这一点。答案几乎是完美的，靠近工具栏时滚动条有点困难，但除此之外它可以工作。秘诀是知道主应用工具栏的高度（通常为 64 像素）和上面显示的内容的高度为<section class="day">

<paper-scroll-header-panel>然后用一些特殊设置将两个底部部分包裹在一个元素中。结果如下

<section class="day">
  Information which takes up about 1/3 of the screen
</section>
<paper-scroll-header-panel condenses condensed-header-height="40px" scroll-away-top-bar class="expanded">
  <section class="calendar header paper-header">
    <paper-tabs>Tabs for each office</paper-tabs>
    <div>Area to allow selection of month and year, with next and previous buttons</div>
    <ul id="daysofweek">...</ul>
  </section>
  <section class="calendar">
    Calendar itself in weekly rows
  </section>
</paper-scroll-header-panel>

属性中的 40pxcondensed-header-height是#daysofweek 元素的高度

关键是设置高度paper-scroll-header-panel。它应该是一个height: calc(100vh - xxxpx)，其中 xxx 是应用程序主工具栏的高度加上节类“天”的高度之和。

于 2016-10-27T22:13:30.463 回答