thinScrollbar.js

엣지, 익스플로러, 크롬 등에서 스크롤바에 스타일을 적용할 수 있게 해주는 플러그인

샘플영상

다운로드

thinScrollbar.js 다운로드

설치/사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/thinScrollbar.js"></script>

<style>
    #test{
        margin:0 auto;
        border:1px solid black;
        padding:10px;
        width:400px;
        height:400px;
        overflow-y:scroll;
    }
</style>


<script>
    $(function(){
         $('#test').thinScrollbar();
    });
</script>

<div id="test">        
    내용
</div>

 

1. 제이쿼리가 설치되어 있어야 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/thinScrollbar.js"></script>

<style>
    #test{
        margin:0 auto;
        border:1px solid black;
        padding:10px;
        width:400px;
        height:400px;
        overflow-y:scroll;
    }
</style>


<script>
    $(function(){
         $('#test').thinScrollbar();
    });
</script>

<div id="test">        
    내용
</div>

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/thinScrollbar.js"></script>

<style>
    #test{
        margin:0 auto;
        border:1px solid black;
        padding:10px;
        width:400px;
        height:400px;
        overflow-y:scroll;
    }
</style>


<script>
    $(function(){
         $('#test').thinScrollbar();
    });
</script>

<div id="test">        
    내용
</div>

 

3. 설치를 원하는 엘리먼트에 아이디를 부여합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/thinScrollbar.js"></script>

<style>
    #test{
        margin:0 auto;
        border:1px solid black;
        padding:10px;
        width:400px;
        height:400px;
        overflow-y:scroll;
    }
</style>


<script>
    $(function(){
         $('#test').thinScrollbar();
    });
</script>

<div id="test">        
    내용
</div>

 

4. 페이지가 실행될때 동시에 실행할 수 있도록 함수를 작성해 줍니다.

 

 

 

 

$('#test').thinScrollbar({
    scrollbarcolor : '#ddd', // 스크롤바 배경색을 결정 합니다. 헥사코드로 작성해야 하며 기본값은 #ddd 입니다.
    slidercolor : '#555' // 스크롤바 색을 결정 합니다. 헥사코드로 작성해야 하며 기본값은 #555 입니다.
});

 

5. 필요한 옵션을 적절히 이용 합니다.

 

 

 

 





! 플러그인 설치 및 수정은 견적문의 해주세요.