스크롤 진행률 표시줄

소개

이 랩에서는 HTML, CSS 및 JavaScript 를 사용하여 스크롤 진행률 표시줄을 만드는 방법을 살펴봅니다. 스크롤 진행률 표시줄은 사용자가 페이지에서 현재 위치를 나타내고, 얼마나 더 많은 콘텐츠가 남아 있는지 보여주는 훌륭한 방법입니다. 이 랩을 마치면 웹사이트에 이 기능을 구현하는 방법에 대한 더 나은 이해를 얻게 될 것입니다.

스크롤 진행률 표시줄

index.html 및 style.css는 이미 VM 에 제공되었습니다.

웹 페이지의 스크롤 백분율을 표시하는 진행률 표시줄을 만들려면 다음 단계를 따르세요.

1. HTML 코드에 id가 "scroll-progress"인 div 요소를 추가합니다.
2. CSS 코드에서 요소의 position을 fixed로, top을 0으로, width를 0%로, height를 4px로, background 색상을 #7983ff로 설정합니다.
3. z-index 값을 큰 숫자로 설정하여 진행률 표시줄이 페이지 상단에, 그리고 모든 콘텐츠 위에 배치되도록 합니다.
4. JavaScript 코드에서 document.getElementById() 메서드를 사용하여 scroll-progress 요소를 선택합니다.
5. document.documentElement.scrollHeight - document.documentElement.clientHeight 공식을 사용하여 웹 페이지의 높이를 계산합니다.
6. scroll 이벤트를 수신하는 window 객체에 이벤트 리스너를 추가합니다.
7. 이벤트 리스너 함수에서 (scrollTop / height) * 100 공식을 사용하여 문서의 스크롤 백분율을 계산합니다.
8. 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 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.