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

##何がしたいか
こんなやつを作りたい。

スクロールしたらそれに応じて伸縮するバー。ページの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;}

##コードの解説
どの擬似要素がどの部分を指定しているのかを簡単に解説します。もっと詳しく知りたい方はググってください。先人方が丁寧に解説してくれています。

###-webkit-scrollbar
スクロールバー全体のスタイル。水平スクロールバーの高さはheightで指定する。垂直スクロールバーの幅はwidthで指定する

###-webkit-scrollbar-track-piece
スクロールバーの動くやつの動ける領域のスタイル。

###-webkit-scrollbar-track-piece:decrement
スクロールバーの動くやつの動ける領域のスタイルのうち、動くやつの左側にある領域。

###-webkit-scrollbar-thumb
スクロールバーの動くやつ。

##仕組み
スクロールバーの動くやつの左側の領域（-webkit-scrollbar-track-piece:decrement）を動くやつ（-webkit-scrollbar-thumb）と同じ色にしている、だけです。

##応用

横スライド式の画像スライダーと組み合わせれば、スライダーがどこまで進んだかが直感的に分かる！
このスライダーの全体のコードはこちらのCodePenから見れます。

##最後に
ここで紹介した以外にもいろいろな擬似要素があるので、もっと面白いものも作れるかも