▲TOPへ戻る

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

array
  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 画面の高さ:
C 画面に表示されていない部分の高さ:
C = A - B
D スクロール量 (px):
スクロール量(%)D / C * 100 =>
point

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

画面の高さを取得 =>B

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

スクロール量(px)=>D

スクロール量(%)=>D / C * 100

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<