Jquery 혹은 javascript만으로 사용할 수 있는 괜찮은 스크롤바 관련 플러그인이 있다.
perfect-scrollbar
https://noraesae.github.io/perfect-scrollbar/
위 그림처럼 얇은 스크롤바를 생성할 수있 있다.
사용법도 상당히 간단하다. 위에 링크된 주소에 소스 및 예제가 비교적 잘 나와 있다.
사용방법은 다음과 같다
해더부분의 소스 Import
1 2 | <script type="text/javascript" src="/p_Scrollbar/js/perfect-scrollbar.jquery.js"></script> <link rel="stylesheet" type="text/css" href="/p_Scrollbar/css/perfect-scrollbar.css"/> | cs |
html 코드 예시
1 2 3 4 5 | <div id="tab_area" style="width: 1209px;"> <ul class="tabs" id="hTab"> <li id="test" class="selected"><a href="#ho"><span>Home</span></a></li> </ul> </div> | cs |
적용될 html object CSS
1 2 3 4 5 6 7 8 | #tab_area { position: relative; margin: 0px auto; margin-top: 2px; height: 44px; width: : 1209px; } | cs |
Script 사용 예시 - 이 예시는 Jquery 버전이며 javascript 버전은 github에 API를 참조
1 2 3 4 5 6 7 8 | // tab_area 오브젝트에 스크롤바 기능을 적용합니다. $('#tab_area').perfectScrollbar(); // tab_area 오브젝트에 스크롤바 기능이 적용 되어있을 경우 현재 오브젝트의 // 상태에 따라 스크롤 바를 on/off 상태를 자동으로 적용한다. $('#tab_area').perfectScrollbar("update"); //tab_area 오브젝트에 스크롤바 기능이 적용 되어있을 경우 스크롤바 기능을 제거한다. $('#tab_area').perfectScrollbar("destroy"); | cs |
div 안의 내용이 동적으로 사이즈가 변경될 경우 update 기능을 이용하여 갱신 시 자동으로 스크롤바 기능이 on/off 된다.
스크롤바의 생성 제거를 반복해서 사용해도 되지만 실제 사용 시 스크롤바 생성시 약간의 스크립트 실행시간이 존재하는것 같아 update를 사용하는것을 권장한다.
마지막으로 작업에 사용했던 실제 사용 버전 파일
perfect-scrollbar-0.6.12.zip'Web > JQuery' 카테고리의 다른 글
| [JavaScript] 개요 (0) | 2016.10.14 |
|---|---|
| [JavaScript] 입문편 (0) | 2016.10.14 |
| 정규식을 이용한 패스워드 복잡도 설정 (0) | 2016.03.25 |
| 쓸만한 Layer 팝업창 (0) | 2015.12.18 |
| 화면중앙에 Layer 띄울때 중앙 좌표 구하는법 (0) | 2015.09.12 |