読書進行状況バー

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

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

• 不完全なコード: 提供されたコードは切り詰められています。 実際に進行状況バーを視覚的に作成および更新する重要な部分が欠落しています。 div は作成されますが、スタイル設定や進行状況の更新ロジックは存在しません。
• 高さの計算が正しくありません: totalHeight の計算は、ページ構造によっては不正確になる可能性があります。 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 のスタイルを設定するには 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 を含めてください。 この改訂されたコードは、より堅牢で正確な読み取り進行状況バーを提供します。 さらに改良するには、特殊なケースの処理や、より洗練されたスタイルの追加などが含まれる可能性があります。

以上が読書進行状況バーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。