1. ホーム
2. パソコン
3. javascript

【javascript】既読量をパーセンテージで表示する方法

投稿日 : 2023年08月06日 更新日 :

やりたいこと

要素のtopがスタートラインに来た時

スタートラインからのスクロール量

const contentStartValue =
  content.getBoundingClientRect().top - 100 + window.scrollY;

 window.scrollY - contentStartValue // スタートラインからのスクロール量

参考

要素の高さを取得する方法。getBoundingClientRectとは？window.innerHeightとは？window.pageYOffsetとは？

contentのbottomとエンドラインとの距離

const contentToBottomlineValue =
  content.getBoundingClientRect().bottom -
  window.innerHeight +  // 画面の高さを引く
  100 -                 // エンドライン100pxを加える
  contentStartValue +   // スタートラインまでの156pxを引く
  window.scrollY;       // スクロール量を加える

スクロールイベントによりパーセンテージを計算

const percent = () => {      
  percentage = Math.floor( // 小数点以下を切捨て
    ((window.scrollY - contentStartValue) / contentToBottomlineValue) * 100
  );

  if (percentage >= 0) {  // パーセンテージが0より大きいの場合
    per.textContent = `${percentage}%`;
  }
  if (percentage > 100) { // パーセンテージが100より大きい時は100％と表示
    per.textContent = "100%";
  }
  if (window.scrollY == 0) {  // スクロール量が0以上の場合
    per.textContent = "0%";
  }
};
  
  document.addEventListener("scroll", percent);

参考

【javascript】小数点を切り下げ、切り上げ、四捨五入する 数値の絶対値、べき乗する方法について

まとめ