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. 필요한 옵션을 적절히 이용 합니다.

 

 

6. 플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다.

[문의하기]

copyright ⓒ 2017. 워크식스