【javascript】ページの高さにおけるスクロール量をパーセント（%）で表示

  window.addEventListener("scroll", function(){
  //  ページの高さ：A
  document.documentElement.scrollHeight
  //  画面の高さ：B
  document.documentElement.clientHeight
  //  まだスクロールされていない部分の高さ：C = A - B
  let hiddenHeight =
  document.documentElement.scrollHeight -
  document.documentElement.clientHeight;
  //  スクロール量（px）: D
  let scrollPx = document.documentElement.scrollTop;
  //  スクロール量(%)：E = D / C * 100
  let scrollValue = Math.round((scrollPx / hiddenHeight) * 100);
  }) 

  window.addEventListener("scroll", function(){
    let scrollProgress = document.getElementById("progress");
    let progressValue = document.getElementById("progress-value");
    //  スクロール量（px）
    let scrollPx = document.documentElement.scrollTop;
    //  まだスクロールされていない部分の高さ
    let hiddenHeight =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;
    //  スクロール量(%)
    let scrollValue = Math.round((scrollPx / hiddenHeight) * 100);
        
    //  スクロール量を円グラフで表示
    scrollProgress.style.background = `conic-gradient(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`;
    progressValue.textContent = scrollValue + "%";
  }) 

ページの高さを取得 =>A

画面の高さを取得 =>B

まだスクロールされていない部分の高さを計算 =>A - B = C

スクロール量（px）=>D

スクロール量（%）=>D / C * 100

ロリポップ！レンタルサーバー SAMURAI ENGINEER(侍エンジニア)｜無料カウンセリング予約