티스토리 스킨 - Scroll Indicator 추가하기

* 기본으로 제공되는 스킨에 Scroll Indicator를 추가하고 싶은 경우 참고하세요.

 

Scroll Indicator는 페이지가 얼마나 스크롤되었는지를 보여주는 진행 표시줄입니다.

 

관리자 페이지에서 꾸미기 메뉴의 스킨 변경을 선택 후, 사용중인 스킨의 편집 버튼을 눌러 아래와 같이 HTML과 CSS, Script를 추가합니다.

 

1. HTML

 - body 태그 바로 다음에 아래의 태그를 추가합니다.

 - 페이지 스크롤에 대한 진행 표시줄 표시를 위한 div 태그 추가

  <div class="progress-container" style="display:none;">
      <div class="progress-bar" id="headerBar"></div>
  </div>

2. CSS

 - CSS 탭을 선택하고 아래의 style을 추가합니다.

 - 페이지 스크롤에 대한 진행 표시줄 표시를 위한 css 추가

/* scroll indicator 추가 */
.progress-container {
	width: 100%;
	height: 8px;
	background: #ccc;
	position: fixed;
	z-index: 999;
}

.progress-bar {
	height: 8px;
	background: #466093;
	width: 0%;
	transition: width .4s ease-out;
	transform: rotateZ(0deg);
}

3. Javascript

 - body 태그 안에 있는 가장 마지막에 있는 <script> 블록이나 body 태그 밖에 있는 가장 마지막의 <script> 블록에 아래 코드를 추가합니다.

 - Letter 스킨의 경우 글 상세정보의 컨텐츠 영역에 대한 선택자로 ".entry-content"를 사용했습니다.
   다른 스킨의 경우 body 태그 아래에 글 상세정보의 구분이 가능한 class나 id 값으로 if문의 querySelector의 선택자 값을 변경해줍니다.

    if (document.querySelector('.entry-content')) { // 상세페이지 구분을 위한 선택자 
		document.querySelector('.progress-container').style.display='block';
		window.onscroll = function () {
			var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
			var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
			var scrolled = (winScroll / height) * 100;
			document.getElementById("headerBar").style.width = scrolled + "%";
		}
	};

 - 사용 속성 설명

   Element.scrollTop : 해당 요소의 수직으로 스크롤 된 픽셀 수를 가져오거나 설정합니다.

   Element.scrollHeight : padding 값 + 보이지 않는 내용까지 포함한 높이 값의 픽셀 수. 읽기 전용 속성으로 수직 스크롤바가 있는 엘리먼트(element)의 CSS 높이를 초과하여, 보이지 않는 부분까지 포함한 내용(content)의 높이(height)를 픽셀로 반환합니다.

   Element.clientHeight : CSS height 값 + CSS padding 값 - 수평 스크롤바 높이 값. 읽기 전용 속성으로 엘리먼트의 내부 높이를 픽셀로 반환합니다. 이 내부 높이라는 것은 내부 여백(padding)을 포함하지만, 수평 스크롤바의 높이, 경계선, 또는 외부 여백(margin)은 포함하지 않습니다.

  => 수직 스크롤 된 픽셀 수 = Element.scrollHeight - Element.clientHeight​

 

4. 적용된 페이지

 

Scroll Indicator가 적용된 화면

 

 

참고 사이트

 - https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

 - https://developer.mozilla.org/ko/docs/Web/API/Element/scrollHeight

 - https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

 - https://www.w3schools.com/howto/howto_js_scroll_indicator.asp