JavaScriptを使わずに、スクロール量に応じて伸び縮みするプログレスバーを作る #CSS

何がしたいか

こんなやつを作りたい。

スクロールしたらそれに応じて伸縮するバー。ページの50%まで進んだらバーも50%のとこまで進む、みたいな。

これをJavaScriptとかjQueryプラグインとか使わずに作ります。

作り方

CSSでスクロールバーをカスタマイズします。-webkit-scrollbar-***という擬似要素を使います。ここから分かる通り、Chromeとかsafariとかのwebkit系ブラウザでしか動きません。（::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN）

とりあえずコードを

「コード見りゃ分かる」という人のためにまずは全体のコードを載せます。コードは必要最低限な箇所のみを抜粋して載せます。すべてのコードはこちらのCodePenに載せています。

HTML

<div>
  <p>ほげーーーーーーーーーーーーーーーーーーーーーほげほげほげーーーーーーーーーーーーーーーーー</p>
</div>

CSS

div {overflow-x: scroll;}
div::-webkit-scrollbar {height: 16px;}
div::-webkit-scrollbar-track-piece {
  background: #ccc;
  border-top: 6px solid #fff;
  border-bottom: 6px solid #fff;
  border-radius: 8px;
}
div::-webkit-scrollbar-track-piece:decrement {
  background: #666;
  border-top: 6px solid #666;
  border-bottom: 6px solid #666;
}
div::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 8px;
}
p {white-space: nowrap;}