🙆‍♀️

【JS】スクロール量に応じて矢印が進む

2024/06/23に公開

スクロール量に応じて進むバーを実装してみました。

https://codepen.io/mdvlzqqm-the-lessful/pen/ExzXmVa

JSの実装

  • スクロールされたらcontainerの高さを取得
  • containerの高さからビューポートの高さを引いて最大のスクロール量を取得
  • スクロール量が最大のスクロール量の何%かを計算して、その値を矢印のtopに設定する。
  • footerの直前で止めたいので、スクロール量の割合が100%を超えたら100を設定するようにする。

Discussion