• 今天我們來運用fromEvent及map來計算一下頁面scroll的狀態，不囉嗦，立馬練習!

Step1: 使用fromEvent來取得scroll的事件

import {fromEvent} from 'rxjs'
fromEvent(document, 'scroll').subscribe(console.log); // 順利的話，scroll event都會印出囉!

Step2: 使用map來解析scrollEvent的資訊，計算出scroll百分比

import {fromEvent} from 'rxjs'

fromEvent(document, 'scroll')
  .pipe(
    // 使用map來解析scrollEvent的資訊，計算出scroll百分比
    map((event: Event) => {
      const { scrollTop, scrollHeight, clientHeight } =
        event.target.scrollingElement;  //<--解析1: 從event.target.scrollingElement拆解出scrollTop, scrollHeight, clientHeight

      const percent = (scrollTop / (scrollHeight - clientHeight)) * 100; // 解析2: 計算百分比
      return percent.toFixed(2); // 解析3: 四捨五入一下
    })
  )
  .subscribe(console.log);

解析

• 我們的目標是scrollingElement，所以透過event.target.scrollingElement就可以取得囉!
• 接著，我們要估算使用者現況scrollBar的百分比，故需要三個參數scrollTop, scrollHeight, clientHeight，這三個參數的定義，可以參考下圖或Shubo的這篇。
  

圖片來源

• 這三個參數拿到後，我們就可以計算使用者目前操作scroll位置的百分比囉。
• 輸出前，別忘了四捨五入到小數第二位，讓整體看起來舒服些!

Step3: 加入一個scrollBar並置頂上點色

• index.html

    <!-- 記得將此img的部分移除或comment --> 
    ...

    <!-- 新增一個scrollbar在此 -->
    <div
      class="progress-bar"
      style="
        position: fixed;
        height: 5px;
        width: 0%;   //<-- 可以先設定 >0%來看看是不是有順利繪出
        top: 0;
        background-color: skyBlue;
      "
    ></div>

Step4: 取得progress-bar並根據百分比修改width

fromEvent(document, 'scroll')
  .pipe(
    map((event: Event) => {
      const { scrollTop, scrollHeight, clientHeight } =
        event.target.scrollingElement;

      const percent = (scrollTop / (scrollHeight - clientHeight)) * 100;
      return percent.toFixed(2);
    })
  )
  .subscribe(
    // console.log
    (percent) => 
      (document.querySelector('.progress-bar').style.width = `${percent}%`) // 修改 progress-bar element中，width的百分比
  );

成果發表

stackblitz

• 是不是水水的啊!!好啦~今天我們就聊到這裡，記得一定要複習，刻意的練習，是為了加深我們腦子對概念的理解，進而培養出直覺的反應，加油!!Rock~~~!

本篇練習的技巧紀錄

1. fromEvent建立scroll event的observable
2. map解析event的值, 取得 target->scrollingElement
3. 從scrollingElement取得三個參數: scrollTop, scrollHeight, clientHeight
4. scrollTop/(scrollHeight-clientHeight)*100%
5. add a bar on html + css
6. modify width(%) in subscribe