CSS로 웹사이트의 스크롤바를 커스텀 변경하기 ie,Chrome,Safari

/* ie 용 스크롤 바 *********************************************/
html { scrollbar-arrow-color: #efefef;

        scrollbar-Track-Color: #efefef; 
        scrollbar-base-color: #dfdfdf;

        scrollbar-Face-Color: #dfdfdf;

        scrollbar-3dLight-Color: #dfdfdf;         
        scrollbar-DarkShadow-Color: #dfdfdf;

        scrollbar-Highlight-Color: #dfdfdf;

        scrollbar-Shadow-Color: #dfdfdf}
/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar {width: 12px; height: 12px;  }
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment {display: block; width: 12px;height: 12px; background: url() rgba(0,0,0,.05);}
::-webkit-scrollbar-track {     background: rgba(0,0,0,.05); }
::-webkit-scrollbar-thumb {  background: rgba(0,0,0,.1);  }
/* ------------------------------------------------------------ */

 

css파일에 삽입하시면 됩니다.

 

이것저것 테스트 해보니 익스용 스크롤바 코드는 20년전부터 있던거라 색깔변경외엔 아무것도 안됩니다. 심지어 rgba코드도 안먹습니다.

 

웹킷용 스크롤바는 백그라운드 이미지도 가능하고 크기변경 색변경 rgba코드도 가능 쉐도우도 가능 

암튼 여간한 할수있는 디자인적 css는 거의 가능하다고 보시면 됩니다.

 

 

-----------------------

 

더 훌륭하고 화려하며 확장성이 좋은 아래 플러그인도 있으니 참고하세요.

xe에 붙이려니 다른 제이쿼리랑 부대끼는게 너무 많아서 하루종일 답을 찾다가 포기했는데

능력자가 애드온같은거로 만들어주면 참 좋겠네요...

 

 

jQuery custom content scroller

http://manos.malihu.gr/jquery-custom-content-scroller/

 

Highly customizable custom scrollbar jQuery plugin. Features include vertical and/or horizontal scrollbar(s), adjustable scrolling momentum, mouse-wheel (via jQuery mousewheel plugin), keyboard and touch support, ready-to-use themes and customization via CSS, RTL direction support, option parameters for full control of scrollbar functionality, methods for triggering actions like scroll-to, update, destroy etc., user-defined callbacks and more.

 

view demoScrollbar themes
more