はじめに
この実験では、HTML、CSS、JavaScript を使用してスクロール進捗バーを作成する方法を探ります。スクロール進捗バーは、ユーザーのページ上の現在位置と、まだ見るべきコンテンツの量を示す優れた方法です。この実験の終了時には、この機能をあなたのウェブサイトに実装する方法をより深く理解することができるでしょう。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、HTML、CSS、JavaScript を使用してスクロール進捗バーを作成する方法を探ります。スクロール進捗バーは、ユーザーのページ上の現在位置と、まだ見るべきコンテンツの量を示す優れた方法です。この実験の終了時には、この機能をあなたのウェブサイトに実装する方法をより深く理解することができるでしょう。
index.html
と style.css
はすでに仮想マシン (VM) に用意されています。
ウェブページのスクロール割合を表示する進捗バーを作成するには、以下の手順に従ってください。
id
が "scroll-progress" の div
要素を追加します。position
を fixed
、top
を 0
、width
を 0%
、height
を 4px
、background
色を #7983ff
に設定します。z-index
の値を大きな数値に設定して、進捗バーがページの最上部にあり、他のコンテンツの上に表示されるようにします。document.getElementById()
メソッドを使用して scroll-progress
要素を選択します。document.documentElement.scrollHeight - document.documentElement.clientHeight
という式を使ってウェブページの高さを計算します。window
オブジェクトに scroll
イベントを監視するイベントリスナーを追加します。(scrollTop / height) * 100
という式を使ってドキュメントのスクロール割合を計算します。style
プロパティを使用して、scroll-progress
要素の width
をスクロール割合に設定します。以下がコードです。
<div id="scroll-progress"></div>
#scroll-progress {
position: fixed;
top: 0;
width: 0%;
height: 4px;
background: #7983ff;
z-index: 10000;
}
const scrollProgress = document.getElementById("scroll-progress");
const height =
document.documentElement.scrollHeight - document.documentElement.clientHeight;
window.addEventListener("scroll", () => {
const scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
});
右下隅にある 'Go Live' をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新すると、ウェブページをプレビューできます。
おめでとうございます!スクロール進捗バーの実験を完了しました。LabEx でさらに多くの実験を行い、スキルを向上させることができます。