JavaScriptおよびCSS変数を含むページプログレスバー
サイトのページをスクロールすると進むスクロールプログレスバーを作成する方法は次のとおりです。 これは、読者が投稿の進行状況を知るための進行状況インジケーターを伝えるための優れた方法です。
これはCSS変数のパワーを使用し、ソリューションはLeaVerouによるこの優れたトークの一部から適応されています。
まず、開始ボディタグの直後に次のマークアップを追加します。
<div class="progress"></div>
次に、この.progress要素を次のようにスタイル設定します。
.progress {
background: linear-gradient(to right, #F9EC31 var(--scroll), transparent 0);
background-repeat: no-repeat;
position: fixed;
width: 100%;
height: 4px;
z-index: 1;
}
線形勾配で、という名前のCSS変数を参照していることに注目してください。 --scroll
、スクロール時に値が与えられます。
つまり、あとはドキュメントの scroll イベントをリッスンし、の値を設定するだけです。 --scroll
スクロール率のカスタムプロパティ。 そのためにelement.style.setPropertyを使用します。 .progress要素は次のインライン値を取得します --scroll
設定したら。
ドキュメントのスクロール率を正確に計算する方法について、 PhilRickettsとこのStackOverflowの質問に対する彼の解決策に感謝します。
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight',
progress = document.querySelector('.progress'),
scroll;
document.addEventListener('scroll', function() {
scroll = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
progress.style.setProperty('--scroll', scroll + '%');
});
👉現在、IEまたはEdgeはCSSカスタムプロパティをサポートしていないことに注意してください。 ただし、サポートは開始されますが、その間、機能は正常に機能が低下します。