はじめに
本記事では、ページ上部に横方向に伸びるスクロールプログレスバーを実装していきます。
スクロールプログレスバーを利用する事で、ユーザーに現在の閲覧位置を視覚的に示すことができます。
ゴール
スクロールすると横方向に伸びるスクロールバーを作成します。
ソース
- 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();
});
動作確認
サーバを立ち上げてページをスクロールすると、横方向にプログレスバーが進むことを確認できました。