RYO.dev

最終更新日:

スクロール量により伸縮するプログレスバー

  1. 概要
  2. サンプル
  3. 特徴
  4. コード
  5. カスタマイズ
  6. 最後に

概要

垂直スクロール量によって伸縮するプログレスバーを作りました。プログレスバーは一般的に画面の上もしくは下に固定されています。プログレスバーは画面の左端から右端まで伸びます。つまり、プログレスバーの最大の長さは、画面の横幅と同じです。もしあなたがページ全体のX%の箇所までスクロールしたら、プログレスバーは画面幅のX%分だけ伸びます。

長いWebページの場合、プログレスバーを使うことで、ユーザーはどれだけ読み進めたのかや残りがどれくらいあるかを視覚的に直感的に把握することができます。

サンプル

このページで使っています。

特徴

コード

See the Pen Scrollbar4 : Progress bar that expands and contracts according to the scroll amount by RYO (@Mryoo) on CodePen.

カスタマイズ

最後に

もし誤った情報を見つけたり、より良いコードを知っていたり、お聞きしたいことがあったりした場合は、TwitterのDMメールにご連絡ください。