• 회원가입
  • 로그인

[js] JS - 스크롤 정도/위치 진행바 표시기 (Scroll Indicator Bar)

Scroll Indicator Bar 적용 방법

1. 아래 좌표 코드 참고 (샘플)

 

https://codepen.io/tymoshenkoyelyzaveta/pen/QWyKBJa



2. <body> 태그 바로 아래애 아래 코드 추가

※ G5 basic 테마 경우, /theme/basic/head.sub.php 하단.


<div class="scrolled-indicator">

    <div class="scrolled-indicator-fill">

    </div>

</div>

 


3. CSS 파일 하단에 아래 코드 추가

※ G5 basic 테마 경우, /theme/basic/css/default.css 하단.

 

.scrolled-indicator {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 3px;

  background-color: #333;

  z-index:999;

}


.scrolled-indicator-fill {

  width: 0%;

  height: 100%;

  background-color: #e76f51;

}

 


4. </body> 태그 앞쪽에 아래 JS 코드 추가

※ G5 basic 테마 경우, /theme/basic/tail.php 하단 

 

<script>

const scrolledIndicatorFill = document.querySelector(

  ".scrolled-indicator-fill"

);

const btnScrollToTop = document.querySelector("#btnScrollToTop");


// 스크롤 표시 함수

window.addEventListener("scroll", () => {

  //스크롤 가능 정도

  const scrollable = document.documentElement.scrollHeight - window.innerHeight; // 문서전체높이 - window 높이;

  //스크롤 한 정도를 px단위로 표시

  const scroll = window.scrollY;


  let percentageScrolled = 100;

  // 스크롤 가능 시

  if (scrollable > 0) {

    percentageScrolled = Math.ceil((scroll / scrollable) * 100);

  }


  scrolledIndicatorFill.style.width = `${percentageScrolled}%`;

});

</script>

 

PS. 콘텐츠 열람 집중에 방해되니, 가급적이면 적용하지 마세요.


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012