JavaScriptおよびCSS変数を含むページプログレスバー

投稿日: 2022-04-20 2022-10-11
タグ: javascript

サイトのページをスクロールすると進むスクロールプログレスバーを作成する方法は次のとおりです。これは、読者が投稿の進行状況を知るための進行状況インジケーターを伝えるための優れた方法です。

これは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カスタムプロパティをサポートしていないことに注意してください。ただし、サポートは開始されますが、その間、機能は正常に機能が低下します。

getdocs

13036