scrollbar 디자인

IE / Chrome / Safari  - 스크롤바

1. -webkit-에서 커스터마이징 스크롤바 만들기

::-webkit-scrollbar {스크롤바 전체영역} ::-webkit-scrollbar-button {상하, 좌우스크롤바 버튼} ::-webkit-scrollbar-track {화살표를 제외한 부분} ::-webkit-scrollbar-track-piece {track에서 실제 움직이는 부분을 제외한 나머지 부분} ::-webkit-scrollbar-thumb {실제로 움직이는 부분(스크롤바 알맹이)} ::-webkit-scrollbar-corner {리사이즈 하기 전 상하 좌우 스크롤바가 만나는 모서리 부분} ::-webkit-resizer {화면 리사이즈시 클릭앤드래그 하는 부분(모서리)}

2. IE에서 커스터마이징 스크롤바 만들기

html {scrollbar-face-color:white; scrollbar-shadow-color: gray; scrollbar-highlight-color: white; scrollbar-3dlight-color: gray; scrollbar-darkshadow-color: white; scrollbar-track-color: white; scrollbar-arrow-color: white;scrollbar-base-color }

scrollbar-base-color                  - 스크롤 바 전체 배경

scrollbar-face-color - 상하좌우로 움직이는 부분(thumb), 화살표가 포함된 상하좌우 끝 사각형 부분(button)

scrollbar-track-color - 스크롤 바 thumb을 제외한 나머지 부분

scrollbar-arrow-color - 좌우, 상하 스크롤바 화살표

scrollbar-highlight-color, crollbar-3dlight-color - 스크롤 바 thumb, button의 왼쪽과 위, 즉, 밝은 부분

scrollbar-darkshadow-color, scrollbar-shadow-color - 스크롤 바 thumb, button의 오른쪽과 아래, 즉, 어두운 부분

참조 https://css-tricks.com/custom-scrollbars-in-webkit/

스타일 - https://jsfiddle.net/jywoo/1mkowcgt/

3.  스크롤바 없애기 (스크롤 기능은 가능)

스크롤바가 생기는 영역에 -ms-overflow-style: none; 추가해 준뒤 css에서 ::-webkit-scrollbar {display:none;} 추가

4. 스크롤바 디자인을 플러그인으로 하기

jquery 기반의 slimscroll.js 을 사용하여 투명 스크롤바 생성이 가능

다운 -> http://rocha.la/jQuery-slimScroll / 라이선스 : Dual licensed under the MIT and GPL

사용법

4-1) jquery와 slimscroll.js를 html에 넣어준다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>




4-2) 스크립트로 스크롤바가 적용 될 부분을 적어준다.

  $("#wapper").slimScroll({ 

height: "200px"  // px 혹은 auto 사용

   });