はじめに

本記事では、ページ上部に横方向に伸びるスクロールプログレスバーを実装していきます。
スクロールプログレスバーを利用する事で、ユーザーに現在の閲覧位置を視覚的に示すことができます。

ゴール

スクロールすると横方向に伸びるスクロールバーを作成します。

ソース

index.html

scroll-progress-bar と scroll-progress-fill の2つの div 要素がプログレスバーを構成します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スクロールプログレスバーのデモ</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!-- プログレスバー -->
    <div id="scroll-progress-bar">
        <div id="scroll-progress-fill"></div>
    </div>
    <div class="content">
        <h1>スクロールプログレスバー(横方向) サンプル</h1>
        <p>スクロールすると横方向にバーが進行します。</p>
    </div>
    <script src="index.js"></script>
</body>
</html>

index.css

scroll-progress-bar は進捗バーの背景部分、scroll-progress-fill は進捗を示す水色の部分のスタイルを作成しています。transitionプロパティに ease-out をつけることで、バーの伸縮に緩やかなアニメーションをつけています。

index.css

body {
  height: 2000px;
  text-align: center;
  font-size: 2rem;
  margin: 0;
  padding: 0;
}

/* プログレスバーの背景部分 */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  z-index: 1;
}

/* 実際に伸びていく水色の部分 */
#scroll-progress-fill {
  height: 100%;
  width: 0;
  background-color: #0088ff;
  transition: width 0.3s ease-out;
}

.content {
  margin-top: 300px;
}

index.js

スクロール位置に基づいてプログレスバーの幅を動的に更新します。スクロール%は、現在のスクロール位置をページ全体の高さで割って算出します。

index.js

document.addEventListener('DOMContentLoaded', () => {
    const progressBar = document.getElementById('scroll-progress-fill');

    // スクロール量に応じて進捗バーの幅を更新
    const updateScrollProgress = () => {
        const scrollPx = document.documentElement.scrollTop;
        const winHeightPx = 
            document.documentElement.scrollHeight - 
            document.documentElement.clientHeight;
            
        // 現在のスクロール量を計算
        const scrolled = (scrollPx / winHeightPx) * 100;
        progressBar.style.width = `${scrolled}%`;
    };
    
    // スクロールイベントが発生するたびに、進捗バーを更新
    window.addEventListener('scroll', updateScrollProgress);
    updateScrollProgress();
});

動作確認

サーバを立ち上げてページをスクロールすると、横方向にプログレスバーが進むことを確認できました。

参考