[JQUERY] 스크롤바를 커스텀해주는 plugin mCustomScrollbar

스크롤바를 커스텀 할 때 주로 사용하는 플러그인

매번 찾아보게 되서 자주 사용하는 것들만 적어본다

 

사이트는 여기▼

jQuery custom content scroller – malihu | web design

기본 사용방법

1. 세팅

폴더에 해당 소스파일들을 넣고 html에 추가한다.

<!-- css -->
<link rel="stylesheet" href="jquery.mCustomScrollbar.css" />

<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

 

2. js

.content부분에 사용하고자 하는 class 또는 id를 넣으면 기본 세팅은 끝

<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

예시화면

테마를 선택하지 않았다면 이렇게 나온다(예시사이트 참고)

옵션사용

옵션에 대한 설명은 사이트를 잘 읽어보면 알 수 있다.

아래는 내가 사용했던 것들만 정리해봤다.

 

3. theme

mCustomScrollbar.를 사용하는 html 태그에 data-mcs-theme="테마명" 추가 또는 js에 theme:"테마명" 추가하면 된다.

<!-- html -->
<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- your content -->
</div>

<!-- js -->
<script>
    (function($){
        $(window).on("load",function(){
            $(".content").mCustomScrollbar({
                theme:"dark"
            });
        });
    })(jQuery);
</script>

테마명예시는 아래에서 확인할 수 있다.

jQuery custom scrollbar demo

 

4. scrollTop

일반 스크롤바 제어하듯이 .scrollTop()을 사용하면 안 된다.

스크롤 바를 제어가 필요하다면 mCustomScrollbar에서 제공하는 scrollTo을 사용하면 된다.

/*
	$(selector).mCustomScrollbar("scrollTo",방향,옵션);
*/

$('.content').mCustomScrollbar("scrollTo","top",{ 
    scrollInertia:100 // 스크롤 시간(초)
});

​다양한 옵션은 플러그인 사이트에서, 사용예시는 아래를 참고하자

jQuery custom scrollbar demo