스크롤 표시기

6165 단어 showdevwebdevbeginnersjavascript


스크롤 표시기는 기본적으로 사용자가 페이지에서 얼마나 스크롤했는지에 따라 채워지는 라인입니다. 일반적으로 페이지 상단에 위치합니다.



산출:

출력 확인here



코딩을 시작하겠습니다.



<body>
 <div class="line" id="scrollIndicator"></div>
 <div>
   // ... some code
 </div>
</body>

위 스니펫에서 수행한 작업은 작은 scrollIndicator<div>를 추가한 것뿐입니다.

스크롤 표시기를 구현하는 방법을 살펴보기 전에 스크롤과 관련된 몇 가지 속성window을 이해해야 합니다.

.line {
      background: #038eff;
      height: 5px;
      border-radius: 3px;
      width: 0%;
      position: fixed;
      top: 0;
    }

위는 선을 그리는 데 필요한 CSS를 보여줍니다. 처음에는 너비가 0이어야 합니다. 그런 다음 스크롤 비율에 따라 너비를 늘립니다.

창의 스크롤 관련 속성:


  • window.innerHeight - 브라우저에서 볼 수 있는 부분의 높이입니다.(예: 640)
  • document.body.scrollHeight - 전체 웹 페이지의 높이입니다.
  • window.scrollY - 사용자가 지금까지 스크롤한 픽셀 수입니다. 페이지 로드 시 0이며 사용자가 아래로 스크롤하면 증가합니다.

    • const scrollIndicatorElt = document.getElementById('scrollIndicator');
const maxScrollableHeight = document.body.scrollHeight - window.innerHeight;
window.addEventListener('scroll', moveScrollIndicator);

  • ID로 scrollIndicator 노드를 가져옵니다. 이 요소에 스크롤 라인이 나타납니다.
  • 사용자가 스크롤할 수 있는 픽셀 수를 지정하는 maxScrollableHeight 찾기. 이를 식별하기 위해 document.body.scrollHeight와 window.innerHeight의 차이를 찾습니다.
  • 이벤트 리스너를 scroll에 연결합니다.

    • function moveScrollIndicator() {
  const percentage = ((window.scrollY) / maxScrollableHeight) * 100;
  scrollIndicatorElt.style.width = percentage + '%';
}

  • moveScrollIndicator 스크롤 이벤트가 발생하면 함수가 실행됩니다.
  • percentage는 scrollIndicator 요소의 너비입니다.
  • percentage는 전체 스크롤 가능 픽셀(maxScrollableHeight)에 대한 사용자가 스크롤한 픽셀( window.scrollY )의 비율로 계산됩니다.



    • 출력을 확인하십시오here. Repo Link

    흥미로운 콘텐츠를 보려면 저를 팔로우하세요.

    내 Website 및

    그게 다야!
    👾 순수 CSS 게임보이
    AngularJS 수동 양식 검증

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage