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

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

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

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

$(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. 進(jìn)行狀況バーを作成します: これは、進(jìn)行狀況バーとして機(jī)能する ID div を持つ reading-progress を動(dòng)的に作成します。
2. Uses height(): メインコンテンツの高さをより正確に計(jì)算するために、height() の代わりに outerHeight(true) を使用します。
3. スクロール イベントの処理: $(window).on('scroll', ...) を使用して、ユーザーのスクロールに応じてプログレス バーの幅を継続的に更新します。
4. 進(jìn)行狀況を正確に計(jì)算します: 進(jìn)行狀況の計(jì)算では、表示されるウィンドウの高さを考慮して、バーが 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 */
}

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

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