JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptでスクロールインジケーター（プログレスバー）を作成する方法

CSSとJavaScriptを組み合わせることで、ページのスクロール進捗状況を視覚的に表示する「スクロールインジケーター」を簡単に作成できます。画面上部に固定されたバーが、ユーザーのスクロール量に応じて伸びていく仕組みで、記事や長いランディングページなどでよく使われるUIパターンです。

実装コード例

以下は、スクロールインジケーターを作成するための完全なHTMLコードです。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-size: 28px;
        margin:0px;
        padding:0px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .header {
        position: fixed;
        top: 0;
        margin-bottom: 100px;
        z-index: 1;
        width: 100%;
        background-color: #ebfffd;
    }
    .progressContainer {
        width: 100%;
        height: 20px;
        background: #ccc;
    }
    .progressBar {
        height: 20px;
        background: #724caf;
        width: 0%;
    }
    .content {
        padding: 100px 0;
        margin: 50px auto 0 auto;
        width: 80%;
    }
</style>
</head>
<body>
<div class="header">
<h1>Scroll indicator example</h1>
<div class="progressContainer">
<div class="progressBar"></div>
</div>
</div>
<div class="content">
<h1>Some headers</h1>
<h1>Some headers</h1>
<h1>Some headers</h1>
<h1>Some headers</h1>
<h1>Some headers</h1>
</div>
<script>
    window.onscroll = function() {showProgress()};
    function showProgress() {
        var scrollCalculate = document.body.scrollTop || document.documentElement.scrollTop;
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        var scrolled = (scrollCalculate / height) * 100;
        document.querySelector(".progressBar").style.width = scrolled + "%";
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

CSSとJavaScriptでスクロールインジケーター（プログレスバー）を作成する方法

ページを下へスクロールすると、それに合わせて紫のプログレスバーが徐々に伸びていきます。

CSSとJavaScriptでスクロールインジケーター（プログレスバー）を作成する方法

仕組みの解説

このスクロールインジケーターは、window.onscrollイベントを利用して動作します。ページがスクロールされるたびにshowProgress()関数が呼び出され、以下の手順で処理が行われます。

1. document.body.scrollTopまたはdocument.documentElement.scrollTopで、現在のスクロール位置（上端からの距離）を取得します。
2. ページ全体の高さからビューポートの高さを引くことで、スクロール可能な最大距離を算出します。
3. 現在のスクロール位置を最大距離で割り、100を掛けることで進捗率（%）を計算します。
4. 計算結果を.progressBar要素のwidthプロパティに設定し、バーの幅を動的に更新します。

この仕組みにより、ページを一番下までスクロールするとバーが100%になり、読了状況がひと目でわかるようになります。デザインの色やバーの高さは、CSSの値を変更するだけで自由にカスタマイズできます。

  1. CSSとJavaScriptでスナックバー／トーストを実装する方法【サンプルコード付き】

    スナックバー（トースト）は、画面の端に一時的に表示される小さな通知メッセージのことです。「保存が完了しました」などの操作結果をユーザーへ伝える際によく使われ、数秒後に自動的に消えるのが特徴です。CSSとJavaScriptを組み合わせれば、特別なライブラリを使わずとも簡単に実装できます。以下に、ボタンをクリックすると画面下部にスナックバーが表示され、数秒後にフェードアウトするサンプルコードを示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content=&qu

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini