はじめに

Header と連動してスクロールするためのディレクティブです。

インストール

npm install @rdlabo/ionic-angular-scroll-header

ディレクティブ用の CSS をグローバルにインポートします（例: styles.css）。

@import '@rdlabo/ionic-angular-scroll-header/css/scroll-header.directive.css';

CDK Virtual Scroll を使う場合は、高さの決まった viewport も設定します。

cdk-virtual-scroll-viewport {
  width: 100%;
  height: 100%;
  .cdk-virtual-scroll-content-wrapper {
    padding-top: inherit;
  }
}

最初の成功: IonContent

スクロール可能な行と、viewportから外れるHeaderを持つページを組み立てます。完成例は IonContent です。

下へスクロールするとContent Headerが隠れ、上へスクロールすると戻ります。Safe Areaと常時表示Native Headerは Safe Area、CDK Viewportは Virtual Scroll です。

目的から選ぶ