Customized styling of scroll bars in HTML

Customized styling of scroll bars in HTML

First posting at 2014-05-26

Cross browsing 문제가 심하긴 한듯.

Table of Contents

in Webkit browser (Chrome, Safari, Opera)

설정들은 참조해서...

▲ default scrollbars. ::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ } ::-webkit-scrollbar-thumb { /* 5 */ } ::-webkit-scrollbar-corner { /* 6 */ } ::-webkit-resizer { /* 7 */ } :horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive ::-webkit-scrollbar:horizontal {} ::-webkit-scrollbar:vertical {}

Scroll bar map for webkit. 위 code에서 각 { /* 1~7 */ }이 무엇을 나타내는지 그림파일로 쉽게 보여줌. (Thanks to 출처: )

▲ strange scrollbar to show the effect drastically. (only in webkit (Chrome, Safari, Opera))

div css style 형태로 많은걸 바꿀 수 있는듯.

in IE (Internet Explorer)

여긴 독특하게 해놓은듯 . color 정도만 바꿀 수 있는듯.

Scroll bar map for IE.

▲ strange scrollbar to show the effect drastically. (only in IE) a b c d e f g h i j k l m n

size (width/height) 조정은 안되는듯? 어떤게 표준이 될래나? 이것도 inherit 되는거겠지? webkit 쪽이 div css style이랑 비슷해서 더 직관적이기는 한데... (오랜만에 IE 11로 열어봤는데, 왜이리 느리지? =ㅇ=;;;; IE는 정말 구리다.)

in Firefox

파폭은 CSS만으로 바꿀 수 없다는듯. (원래 있었는데, deprecated 된듯도.)

using jQuery plug-in (Cross-Browser)

누군가 cross-browser 문제를 해결하기 위해 jQuery로 짜놓은듯 함 . 공부를 조금 해야 써먹을 수 있을듯. 그리 어렵진 않은거 같긴한데, 확실히 CSS보단 귀찮은 작업.

References and Related Articles

General

1. circlash.tistory.com - CSS로 블로그 스크롤 바 스타일 지정하기(IE, Safari, Chrome), 2011-05-09
2. codemug.com - Custom scrollbars for IE, Chrome and Firefox using CSS, 2013-03-04, by Jeff
3. manos.malihu.gr - jQuery custom content scroller, last updated on 2014-05-30, by malihu

Webkit

4. css-tricks.com - Custom Scrollbars in WebKit, 2011-05-02, by Chris Coyier
5. webkit.org - Styling scrollbars; 공식 홈페이지 같은데, 그다지 잘 정리되어 있지는 않은듯.

IE

6. Internet Explorer Dev Center - API reference - scrollbar-track-color property; 뭔가 정리가 대충만 되어 있는듯.