[ CSS ] scrollbar ( IE / Chrome / Safari ) - 스크롤바 익스 크롬 사파리

Webkit 기본 꾸밈 소스 제공

::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}

======================================================================

::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  border-radius: 10px;}
::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

======================================================================

/* GLOBAL */

* {

 font-family : "나눔고딕", "돋움", Dotum;

 font-size : 12px;

 color : #777777;



 /* SCROLLBAR IE */

 //overflow:auto;

 scrollbar-arrow-color:#9D9992;

 scrollbar-3dlight-color:#D4D0C8;

 scrollbar-darkshadow-color:#D4D0C8;

 scrollbar-face-color:#FFFFFF;

 scrollbar-hightlight-color:#FFFFFF;

 scrollbar-shadow-color:#FFFFFF;

 scrollbar-track-color:#EAE7E1;

}

/* SCROLLBAR Chrome Safari */

::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }

::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url(`./images/bg.png`) #efefef}

::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}

::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}

========================================================================================



웹페이지 글이 길어지면 화면 오른쪽이나 아래에 스크롤 바가 나타난다. 대부분 회색 배경에 하얀 화살표가 나타난다. CSS를 사용해서 스크롤 바를 꾸며보자. fleXcroll이나 jScrollPane이라는 jQuery 플러그인을 사용하면 모든 브라우저에 스크롤 바를 적용할 수 있지만, 이번엔 그냥 CSS만 사용해서 IE, Chrome, Safari의 스크롤 바를 바꿔보자.

Internet Explorer용 코드
html {scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-DarkShadow-Color: #efefef; scrollbar-Highlight-Color: #efefef; scrollbar-Shadow-Color: #efefef}
Webkit(Safari, Chrome)용 코드
/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url(`./images/bg.png`) #efefef}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}
늘 하던 것처럼 위 CSS를 [티스토리 관리 화면] - [스킨] - [HTML/CSS 편집] - [style.css]에 맨 아래에 붙여 넣는다. 이 스타일을 기본으로 원하는 스타일을 적용하면 된다.

일단 IE 스타일을 살펴보자. IE는 스크롤 바 각 요소의 색만 바꿀 수 있다. scrollbar-arrow-color는 스크롤 바 아래위 왼쪽 오른쪽 화살표 색이다. scrollbar-base-color는 스크롤 바 전체 배경 색이다. scrollbar-Face-Color는 상하좌우로 움직이는 부분(thumb), 화살표가 포함된 상하좌우 끝 사각형 부분(button) 색이다. scrollbar-Track-Color는 스크롤 바 thumb를 제외한 나머지 빈 부분 색이다.scrollbar-DarkShadow-Color, scrollbar-Shadow-Color는 스크롤 바 thumb, button의 오른쪽과 아래, 즉, 어두운 부분 색이다.scrollbar-3dLight-Color, scrollbar-Highlight-Color는 스크롤 바 thumb, button의 왼쪽과 위, 즉, 밝은 부분 색이다. /`pəlp/ 블로그처럼 스크롤 바 화살표를 없애려면 scrollbar-arrow-color와 scrollbar-Face-Color를 같은 색으로 지정하면 된다. 그 외 나머지 요소 역시 블로그 스킨이나 웹페이지 구성에 맞게 적당한 색을 지정하면 스크롤 바 스타일을 바꿀 수 있다. 주의할 것은 IE에 스크롤 바 CSS를 적용하려면 html 즉, 페이지 전체에 적용해야 한다는 점이다. IE 스크롤 바 스타일은 IE5 이상에 적용된다.

Webkit용 스타일은 좀 더 복잡하다. 일단 사용할 수 있는 가상 요소와 가상 선택자를 살펴보자.

가상 요소 종류
::-webkit-scrollbar   스크롤 바 영역 전체
::-webkit-scrollbar-button   상하, 좌우 화살표가 포함된 부분
::-webkit-scrollbar-track   화살표를 제외한 몸통 부분
::-webkit-scrollbar-track-piece   몸통 부분에서 실제 움직이는 부분을 제외한 나머지 길
::-webkit-scrollbar-thumb   몸통 부분에서 실제 움직이는 부분
::-webkit-scrollbar-corner   상하/ 좌우 스크롤 바가 만날 때 오른쪽 아래 공간
::-webkit-resizer   corner 공간으로 크기를 변경할 수 있음
가상 선택자 종류
:horizontal   좌우 스크롤 바의 모든 요소에 적용
:vertical   상하 스크롤 바의 모든 요소에 적용
:decrement   스크롤 바에서 윗쪽, 왼쪽 방향 button, track 요소에 적용
:increment   스크롤 바에서 아래쪽, 오른쪽 방향 button, track 요소에 적용
:start   thumb 이전에 위치한 button, track 요소에 적용
:end   thumb 이후에 위치한 button, track 요소에 적용
:double-button   상하 화살표가 붙어 두 개가 한꺼번에 표시된 요소에 적용 (좌우도 같음)
:single-button   상하 화살표가 아래 위 따로 나뉘어 표시된 요소에 적용 (좌우도 같음)
:no-button   화살표 button이 없는 요소에 적용
:corner-present   스크롤 바 corner가 있는 요소에 적용
:window-inactive   지금 활성화된 창의 스크롤 바에 적용
가상 요소는 말 그대로 가상으로 사용할 수 있는 요소(element)다. CSS에선 span, p, div 등 HTML 각 요소를 선택해서 스타일을 적용하지만, 스크롤 바는 HTML 태그로 지정할 수도, class나 id를 부여할 수도 없으므로 가상 요소를 사용해야 한다. 위의 가상 요소(::-webkit으로 시작하는 항목)는 일반 요소처럼 사용할 수 있다. 예를 들어 span 요소에 배경색을 지정할 때 span {background:#ccc}라고 스타일을 지정하듯 ::-webkit--scrollbar {width: 12px; height: 12px}처럼 스타일을 지정할 수 있다. 가상 선택자는 webkit 엔진에서 스크롤 바 스타일을 지정할 때 적용할 수 있도록 제공된 선택자다. :link, :hover, :first-child, :last-child 등의 가상 선택자를 사용할 때처럼 webkit 스크롤 바 스타일엔 위의 가상 선택자를 추가로 사용할 수 있다. 예를 들어 오른쪽 스크롤 바 위로 화살표 스타일을 지정하려면 ::webkit-scrollbar-button:start:decrement {background:#efefef}처럼 사용할 수 있다.

Chrome, Safari에서만 스크롤 바 스타일이 적용됩니다.
<textarea style="font: normal normal normal 1em/150% `malgun gothic`, `맑은 고딕`, dotum, 돋움, sans-serif; width: 350px; height: 150px; white-space: nowrap; ">