0

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

私のページの 1 つは、予定の概要を表示して予約するために使用される大きな月間カレンダーです。予約に使用すると、選択した日の予約に関する重要な情報がその上に大量に表示されます。通常の画面では、カレンダーの最後の数週間が画面の下部から消え、ページがスクロール可能になります。

これの構造はその<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" のセクションは、画面上部 (メイン アプリ ツールバーの下) で静的なままです。
  • ユーザーが完全になくなるまでページを下にスクロールすると、カレンダー ヘッダーの選択が折りたたまれます<app-header>。
  • ページの残りの部分であるカレンダー自体が上下にスクロールし、ユーザーが完全に下にスクロールしたときに、その月の最後の週がページのちょうど一番下になるようにします。
  • class="day" のセクションが存在しない場合 (つまり、誰かがカレンダーを表示しているだけで、高さが 0 になるまで折りたたまれますが、ページの残りの部分は上記のように動作しますが、ビューポートが大きくなります。

ネストされたものを使用し<app-header-layout>てみましたが、アプリのツールバーが残っているようで、カレンダーの下部が画面の残りの部分を占めており、スクロールできません。そのため、ポリマー要素を使用するか、css を使用して自分で行うかのいずれかで、これを達成する方法についてのアドバイスを探しています。

アップデート

を使用してみpaper-scroll-header-panelましたが、すべてが見えなくなりました。クロム開発ツールのように、さまざまな要素がページの正しい位置に配置されたのに、表示されず、理由がわかりませんでした。

また、カレンダー コンテナー要素を に設定しようとしoverflow-y: scrollましたが、最終的に 2 つの垂直スクロール バーが表示され、外側のスクロール バー (アプリ レベル 1) のみが機能しました。scrollTargetこの実験は、私がon で遊んでみるべきかどうか迷っていますapp-header

4

1 に答える 1

0

私は最終的にこれを行う方法を見つけました。答えはほぼ完璧です。ツールバーに近いとスクロールバーに少し問題がありますが、それ以外は機能します。秘訣は、メイン アプリのツールバー (通常は 64px) と上記のコンテンツの高さを知ることです。<section class="day">

次に、いくつかの特別な設定を使用して、2 つの下部セクションを<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です。xxxはheight: calc(100vh - xxxpx)、アプリケーションのメイン ツールバーの高さとセクション クラス「日」の高さの合計です。

于 2016-10-27T22:13:30.463 に答える