JavaScriptおよびCSS変数を含むページプログレスバー
提供:Dev Guides
サイトのページをスクロールすると進むスクロールプログレスバーを作成する方法は次のとおりです。 これは、読者が投稿の進行状況を知るための進行状況インジケーターを伝えるための優れた方法です。
これは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カスタムプロパティをサポートしていないことに注意してください。 ただし、サポートは開始されますが、その間、機能は正常に機能が低下します。