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;
}
線形グラデーションで、スクロール時に値が与えられる--scroll
という名前のCSS変数を参照していることに注目してください。
つまり、あとはドキュメントの 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カスタムプロパティをサポートしていないことに注意してください。 ただし、サポートは開始されますが、その間、機能は正常に機能が低下します。