[티스토리 스킨 편집] 1. 스크롤바 수정하기

스크롤바를 커스터마이징하는 방법에 대해 알아보자.

이 포스팅의 목표:
1. 부드러운 스크롤 바 설정
2. Scroll Indicator 만들기
3. 스킨에 index.xml 수정하여 옵션 추가
4. top 버튼 만들기       //2019.06.04 아직 미완

 

부드러운 스크롤바 만들기

 

[스킨 편집 - html편집 - html편집]에서 css를 연다.

css에 다음과 같은 코드를 추가한다. 

/* css */
html { scroll-behavior: smooth;}

 

Scroll Indicator 만들기

progress bar라고도 한다.  스크롤의 현재 위치를 화면 상단에 표시해준다. 사진 속 회색 바가 Scroll Indicator다.

Scroll Indicator

Scroll Progress bar 생성은 두 가지 단계로 이루어진다. 1. CSS 편집 / 2. jQuery 편집

 

1. CSS 편집 ; CSS에 다음과 같은 내용을 추가한다. 

/* css */
body {
    -ms-overflow-style: none;  /* IE 10+ */
    scrollbar-width: none;  /* Firefox */
    }
		
::-webkit-scrollbar { 
    display: none; /* 스크롤바 안 보이게 하기 */
	}
	

/* The progress container (background) */
.progress-container {
	position: sticky;	/* 화면 상단에 붙어있도록; sticky */
	top: 0px;
	width: 100%;
	height: 5px;
	background: rgba(221,221,221,0%);
	z-index: 100;		/* 맨 앞으로 정렬 */
}

/* The progress bar (scroll indicator) */
.progress-bar {
	top: 0px;
	height: 5px;
	background:  #9b9b9b;
	width: 100%;
	transform: translateX(-100%); /* progress bar를 화면 밖으로 치워둔다 */
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	z-index: 100;
}

 

2. jQuery편집

자바스크립트로 써봤는데 안 먹히더라... jQuery를 사용해야 한다..

jQuery를 몰라서 고생 좀 했다.

html에 다음과 같은 코드를 추가해준다.

	<script>
		//jquery here
		$(window).on('scroll', function(){
			var winScroll = ($(window).scrollTop());
			var height = $(document).outerHeight() - $(window).height();
			var scrolled = (winScroll / height) * 100;
			$("#myBar").css("transform","translate("+(-100+scrolled)+"%,0)");
			$("#myBar").css("transition:transform 0.3s ease-out");
	});
	</script>

myBar의 width를 scrolled만큼 변경해주는 방법도 있다. 하지만 그렇게 되면 DOM 객체를 계속 수정해야 하니 차라리 바를 화면 끝에서 서서히 밀어내는 방식을 이용하는게 낫다고 하여 따라했다.

 

 

 

스킨 옵션 추가하기

스킨에서 옵션을 껐다 켰다 할 수 있도록 만들어 보자. 지금은 스크롤바에 관한 옵션을 만들어보자.

스크롤바 옵션

 

옵션은 `index.xml`파일을 수정하여 만들어준다.

 

[티스토리 블로그 관리 - 스킨 변경]에서 현재 쓰고 있는 스킨을 다운로드 해 준다.

다운로드 한 압축을 풀어 `index.xml`을 편집 한 후 저장한다. [스킨편집- html편집 - 파일업로드]에 변경한 `index.xml`을 업로드한다. 

 

나는 스크롤바 옵션을 주려고 아래와 같은 코드를 추가하고 업로드했다. 저 xml파일의 양식이 궁금하다면 티스토리 스킨 가이드 를 보자!

//index.xml 	
    <variablegroup name="Scrollbar">
    <variable>
      <name>smooth-scrolling</name>
      <label><![CDATA[ 부드러운 스크롤링 ]]></label>
      <type>BOOL</type>
	  <option />
      <default>false</default>
    </variable>

	  <variable>
      <name>scroll-indicator</name>
      <label><![CDATA[ 스크롤 인디케이터]]></label>
      <description><![CDATA[ 우측 스크롤바 대신 상단 스크롤 인디케이터를 사용합니다. ]]></description>
      <type>BOOL</type>
	  <optino />
      <default>false</default>
    </variable>
  </variablegroup>
	</variables>

Scrollbar option

짜잔! Scrollbar 옵션이 생겼다.

 

 

 

 

---

 

해야 할 것: 

홈/ 리스트 말고 그냥 포스팅에서만 스크롤바 대신 프로그레스 바 나오게 하기

 

 

참고:

 

티스토리에 jQuery 적용하기 - https://www.jbfactory.net/10527

티스토리 강좌 | jQuery 사용하는 방법

 

컨텐츠 페이지에서 스크롤 상태 설정하기 - https://tyle.io/blog/61

[jQuery] 컨텐츠 페이지에서 스크롤상태 표시하기- Progress Indicator

 

Scroll Indicator - https://www.w3schools.com/howto/howto_js_scroll_indicator.asp_

 

티스토리 자체 스킨 편집 가이드: https://notice.tistory.com/1775?category=449449

[HTML/CSS편집] 사용중인 스킨 편집하기