읽기 진행률 표시줄

이 코드 조각은 웹페이지에 읽기 진행률 표시줄을 추가합니다. 막대는 기본 콘텐츠 영역을 통한 사용자의 스크롤 진행 상황을 시각적으로 나타냅니다. 어떻게 작동하는지 분석하고 개선해 보겠습니다.

코드는 main 요소의 전체 높이를 기준으로 스크롤 위치를 기준으로 진행률을 계산하려고 시도합니다. 그러나 여기에는 몇 가지 문제가 있습니다.

• 불완전한 코드: 제공된 코드가 잘렸습니다. 실제로 진행률 표시줄을 시각적으로 생성하고 업데이트하는 중요한 부분이 누락되었습니다. div이 생성되었지만 스타일 지정이나 진행 업데이트 논리가 없습니다.
• 잘못된 높이 계산: totalHeight의 계산은 페이지 구조에 따라 부정확할 수 있습니다. outerHeight(true)을 사용하면 바람직하지 않은 여백이 포함됩니다. 또한 초기 계산 후 높이가 변경될 수 있는 동적 콘텐츠도 고려하지 않습니다.
• 진행률 업데이트 부족: 사용자가 스크롤할 때 진행률 표시줄을 업데이트하는 코드가 없습니다. 계산은 문서가 준비되면 한 번만 이루어집니다.
• 바닥글 높이 문제: footerHeight을 빼면 바닥글이 고정되거나 주요 콘텐츠와 겹치는 경우 진행률 계산이 잘못될 수 있습니다.

다음은 이러한 문제를 해결하는 개선된 버전입니다.

<code class="language-javascript">$(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 + '%');
    });
  }
});</code>

개선된 코드:

1. 진행률 표시줄 생성: 진행률 표시줄 역할을 하기 위해 ID가 div인 reading-progress를 동적으로 생성합니다.
2. height() 사용: 주요 콘텐츠 높이를 보다 정확하게 계산하기 위해 height() 대신 outerHeight(true)을 사용합니다.
3. 스크롤 이벤트 처리: $(window).on('scroll', ...)를 사용하여 사용자가 스크롤할 때 진행률 표시줄의 너비를 지속적으로 업데이트합니다.
4. 진행률을 정확하게 계산: 진행률 계산은 표시되는 창 높이를 고려하여 막대가 100%를 초과하지 않도록 합니다.
5. CSS 추가(필요): #reading-progress div의 스타일을 지정하려면 CSS를 추가해야 합니다. 예:

<code class="language-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 */
}</code>

이 코드가 작동하려면 프로젝트에 jQuery를 포함해야 합니다. 이 수정된 코드는 더욱 강력하고 정확한 읽기 진행률 표시줄을 제공합니다. 추가적인 개선에는 엣지 케이스 처리 및 더욱 정교한 스타일 추가가 포함될 수 있습니다.

위 내용은 읽기 진행률 표시줄의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!