このコード スニペットは、Web ページに読書進行狀況バーを追加します。 バーは、メイン コンテンツ領(lǐng)域におけるユーザーのスクロールの進行狀況を視覚的に表します。その仕組みを分析して改善してみましょう。

このコードは、main 要素の合計の高さを基準としたスクロール位置に基づいて進行狀況を計算しようとします。 ただし、いくつかの問題があります:

• 不完全なコード: 提供されたコードは切り詰められています。 実際に進行狀況バーを視覚的に作成および更新する重要な部分が欠落しています。 div は作成されますが、スタイル設(shè)定や進行狀況の更新ロジックは存在しません。
• 高さの計算が正しくありません: totalHeight の計算は、ページ構(gòu)造によっては不正確になる可能性があります。 outerHeight(true) を使用するとマージンが含まれるため、望ましくない可能性があります。 また、最初の計算後に高さが変更される可能性がある動的コンテンツも考慮されていません。
• 進行狀況の更新の欠如: ユーザーがスクロールするときに進行狀況バーを更新するコードがありません。 計算はドキュメントの準備ができたときに 1 回だけ実行されます。
• フッターの高さの問題: フッターが固定されている場合、またはメイン コンテンツと重なっている場合、footerHeight を減算すると進行狀況の計算が正しく行われない可能性があります。

これらの問題に対処した改良版は次のとおりです:

$(document).ready(function() {
  if ($('body').hasClass('single')) {
    const progressBar = $('<div id="reading-progress"></div>');
    $('header').after(progressBar);

    let totalHeight = $('main').height(); // Use height() for more accurate calculation
    let windowHeight = $(window).height();

    $(window).on('scroll', function() {
      let scrollTop = $(this).scrollTop();
      let progress = (scrollTop / (totalHeight - windowHeight)) * 100; // Adjust for window height
      progress = Math.min(progress, 100); // Cap progress at 100%
      $('#reading-progress').css('width', progress + '%');
    });
  }
});

この改良されたコード:

1. 進行狀況バーを作成します: これは、進行狀況バーとして機能する ID div を持つ reading-progress を動的に作成します。
2. Uses height(): メインコンテンツの高さをより正確に計算するために、height() の代わりに outerHeight(true) を使用します。
3. スクロール イベントの処理: $(window).on('scroll', ...) を使用して、ユーザーのスクロールに応じてプログレス バーの幅を継続的に更新します。
4. 進行狀況を正確に計算します: 進行狀況の計算では、表示されるウィンドウの高さを考慮して、バーが 100% を超えることを防ぎます。
5. CSS の追加 (必須): #reading-progress div のスタイルを設(shè)定するには CSS を追加する必要があります。 例:

#reading-progress {
  height: 5px; /* Adjust height as needed */
  background-color: #007bff; /* Adjust color as needed */
  position: fixed;
  top: 0;
  left: 0;
  width: 0; /* Initially 0% width */
  z-index: 1000; /* Ensure it's on top */
}

このコードを機能させるには、必ずプロジェクトに jQuery を含めてください。 この改訂されたコードは、より堅牢で正確な読み取り進行狀況バーを提供します。 さらに改良するには、特殊なケースの処理や、より洗練されたスタイルの追加などが含まれる可能性があります。

以上が読書進行狀況バーの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。