Edited at

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


何がしたいか

こんなやつを作りたい。

1554600665978.gif

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

無題.png


-webkit-scrollbar-track-piece

スクロールバーの動くやつの動ける領域のスタイル。

無題.png


-webkit-scrollbar-track-piece:decrement

スクロールバーの動くやつの動ける領域のスタイルのうち、動くやつの左側にある領域。

無題.png


-webkit-scrollbar-thumb

スクロールバーの動くやつ。

無題.png


仕組み

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


応用

1554599974002.gif

横スライド式の画像スライダーと組み合わせれば、スライダーがどこまで進んだかが直感的に分かる!

このスライダーの全体のコードはこちらのCodePenから見れます。


最後に

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