概要
【Vanilla JS】ページをどれだけスクロールしたかを可視化するプログレスバーを画面上部にFixedで表示する方法を紹介。用途・要件
- プログレスバーは画面上部にFiexdで設置する。
- スクロール時とリサイズ時にプログレスバーを更新する。
- divタグを使用。
- JavaScriptのみで実装。（jQuery不使用）
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
注意事項
- iOSではバウンススクロール中にプログレスバーの更新が止まる。
- DEMOプレビュー上で正常時に動作しないため、本記事にはDEMOはございません。ローカル環境にソースコードを移設してご確認ください。
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
