스크롤 바 커스텀하기

/* 전체적인 스크롤 바 */
::-webkit-scrollbar {width: 5px;} /* 가로스크롤은 height값으로 조절하면 된다. */
/* 스크롤 바 제외한 여백 */
::-webkit-scrollbar-track {background: #f5f5f5;}
/* 스크롤 바 */
::-webkit-scrollbar-thumb {background: #202020;}
/* 스크롤 바 호버일 때 */
::-webkit-scrollbar-thumb:hover {background: #ccc;}
/* 스크롤 바 클릭할 때 */
::-webkit-scrollbar-thumb:active {background: #888;} 
/* 스크롤 바 상하단 버튼 */
::-webkit-scrollbar-button {display: none;}
/* 스크롤의 화살표가 포함된 영역 */
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment {			
  display:block;
  height:8px;
  background: #000;
} 
/* 상하+좌우 스크롤이 만나는 공간 */
::-webkit-scrollbar-corner {background: red;}


/***** 사용 방법 *****/
.content::-webkit-scrollbar {width: 5px;}

스크롤을 커스텀할 컨텐츠를 선택자로 두고 속성을 쓰면 된다.

전체에 사용할때는 body에 적용하면 된다.

 

스크롤바 커스텀 참고 이미지

---

IE에서 스크롤 바 수정하기

/* 전체 스크롤 바 커스텀 */
html {
  scrollbar-3dLight-Color: #f5f5f5; 
  scrollbar-arrow-color: black; 
  scrollbar-Face-Color: #202020; 
  scrollbar-Track-Color: #f5f5f5; 
  scrollbar-DarkShadow-Color: #000000; 
  scrollbar-Highlight-Color: #FF8224; 
  scrollbar-Shadow-Color: #ED4C00;
}

/* 스크롤 바 커스텀 */
.content {
  scrollbar-3dLight-Color: #f5f5f5; 
  scrollbar-arrow-color: black; 
  scrollbar-Face-Color: #202020; 
  scrollbar-Track-Color: #f5f5f5; 
  scrollbar-DarkShadow-Color: #000000; 
  scrollbar-Highlight-Color: #FF8224; 
  scrollbar-Shadow-Color: #ED4C00;
}

IE 스크롤 바 커스텀 참고 이미지

 

IE에서는 안타깝게 width값을 수정할 수는 없다고 한다.

IE까지 완벽하게 하고싶다면 플러그인을 사용하면 될것 같다.

 

참고 : 스크롤바 플러그인(IE에도 적용 가능) http://manos.malihu.gr/jquery-custom-content-scroller/

---

Tip.  스크롤 바는 보이지 않지만 기능은 작동하게 만들고 싶을때에는 해당 선택자에게        

       -ms-overflow-style: none; (ie 대응) ,       

       ::-webkit-scrollbar {display: none;} 을 주면 된다.

 

 

** 아직 적용 못해본 속성도 있지만 추후에 기회가 된다면 사용해 보기 위해 정리해두었다.      

    혹시 틀린 사항이나 적용되지 않는 사항이 있으면 내용 공유 부탁드립니다.