實作: 根據scroll的位置，在頁面上方顯示一個 progress bar 對應scroll 的位置。

Demo:
https://angular-ym-scroll-progress-bar.stackblitz.io

**app.component.html **

<mat-progress-bar color="warn" mode="determinate" [value]="progressValue$ | async"></mat-progress-bar>

1. 使用 angular material 的 mat-progress-bar
   可以參考

[Angular Material完全攻略] Day 18 - 設計一個部落格(3) - Progress Bar、Progress Spinner

https://ithelp.ithome.com.tw/articles/10196030

2.Async pipe
在 ts 定義 progressValue$ 取得scroll的值
progressValue$ | async

**app.component.ts **

export class ScrollProgressBarComponent implements OnInit {

  progressValue$;

  constructor() {}

  ngOnInit() {
    this.getprogressValue();
  }

  getprogressValue() {
    this.progressValue$ = fromEvent(window, "scroll").pipe(
      map(() => {
        const winScroll =
          document.body.scrollTop || document.documentElement.scrollTop;
        const height =
          document.documentElement.scrollHeight -
          document.documentElement.clientHeight;
        return Math.round((winScroll / height) * 100);
      })
    );
  }
}

1.定義 progressValue$

2.getprogressValue() 方法

fromEvent(window, "scroll")
scroll event 的 Observable，之後可以用pipe處理回傳給 progressValue$ 的值

const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
return Math.round((winScroll / height) * 100);

計算 scroll 畫面的百分比

3. progressValue$ 取到 scroll的值就完成了。

參考:
Material.angular.io

https://material.angular.io/guide/getting-started

[Angular Material完全攻略] Day 18 - 設計一個部落格(3) - Progress Bar、Progress Spinner

https://ithelp.ithome.com.tw/articles/10196030