[Scroll] mCustomscrollbar js 란, 그리고 옵션

# 목차

1. 사용목적
2. mCustomscrollbar js 란?
3. 플러그인 홈페이지
4. 사용을 위한 설치
5. 사용을 위한 설정(css, js)
6. 사용을 위한 레이아웃 구축(html)
7. 사용을 위한 구문 작성(js) 그리고 결과
8. 주로 사용하는 옵션

---

1. 사용목적

브라우저나 모바일에서 기본으로 제공하는 스크롤을 커스텀 하기위해 사용한다.

통일된 디자인의 느낌을 잡아주는 한끗 역할을 하는 플러그인이다.

 

 

 

 

 

2. mCustomscrollbar js란?

'mCustomscrollbar js'는 스크롤바를 디자인적으로 유연하게 커스텀하여 제공하는, 제이쿼리 기반의 플러그인이다.

마지막 업데이트가 2016년도 6월임에도 웹,앱에서 사용에 무리가 없다.(마우스휠, 키보드, 터치 모두 가능)

RTL(오른쪽에서 왼쪽으로)읽기를 위해 방향지원도 하고 있다. 

 

 

 

 

3. 플러그인 홈페이지

해당 홈페이지에서 'mCustomscrollbar.js' 플러그인을 사용하는 방법, 예제 등을 확인할 수 있다.

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

jQuery custom content scroller – malihu | web design

 

 

 

 

 

4. 사용을 위한 설치

해당 플러그인을 사용하기 위해선 설치가 필요하다.

(해당 플러그인은 제이쿼리 기반이기 때문에 반드시 제이쿼리를 먼저 설치해 줄것)

설치의 대한 방법은 총 3가지로 되어 있으며, 각자 필요에 맞는 방법으로 설치 할 수 있도록 한다.

(필자는 사용시 '3. Download assets'을 주로 사용하였다.)

   1. Install from NPM : 'NPM' 으로 인스톨

   2. Use Swiper from CDN : 프로젝트에 해당 파일을 포함하고 싶지 않은 경우, 'CDN' 으로 링크  삽입

   3. Download assets : 플러그인 파일을 다운로드하여 프로젝트 내 배치

 

 

 

 

 

5. 사용을 위한 설정(css, js)

'mCustomscrollbar js' 의 'How to use it' 영역에 있는 소스로 테스트 해보도록 한다.

[Installation] mCustomscrollbar js를 필요에 맞는 방법으로 인스톨 한다

- Install from NPM

// install mCustomScrollbar JS
npm install jquery
npm install imports-loader
npm install jquery-mousewheel
npm install malihu-custom-scrollbar-plugin

// import mCustomScrollbar JS
import $ from 'jquery';
import 'imports-loader';
import 'jquery-mousewheel';
import 'malihu-custom-scrollbar-plugin';

'4번 사용을 위한 설치' 에서 언급했다 싶이 제이쿼리 기반이기 때문에,
반드시 제이쿼리를 인스톨 해주고, 플러그인을 인스톨 한다.

NPM에서만 해당 플러그인 이름이 조금 다르므로 이점 체크! (제공되는 이름 : malihu-custom-scrollbar-plugin)

 

 

 

- Use mCustomscrollbar js from CDN

// jsdelivr versioned/minified
https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.concat.min.js
https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/jquery.mCustomScrollbar.min.css
https://cdn.jsdelivr.net/jquery.mcustomscrollbar/3.0.6/mCSB_buttons.png

// Github latest/minified
https://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js
https://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css
https://malihu.github.io/custom-scrollbar/mCSB_buttons.png

 

 

 

- Download assets

페이지 상단 부에 있는, 'download'를 클릭해 파일을 다운받는다.

<link
  rel="stylesheet"
  href="내 프로젝트 경로/jquery.mCustomScrollbar.css"
/>

<script src="내 프로젝트 경로/jquery.mCustomScrollbar.concat.min.js"></script>

 

 

 

 

 

6. 사용을 위한 레이아웃 구축(html)

[Initialize via HTML] html로 레이아웃을 설정

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

스크롤을 바꿔주려는 요소에 class="mCustomScrollbar" 를 넣어준다.
테마는 data-mcs-theme="dark" 처럼 넣어줄 수 있다.

클래스명칭은 유연하게 지을 수 있으며, 스크립트 호출함수만 동일하게 작성해 주면 된다.

 

 

 

 

 

7. 사용을 위한 구문 작성(js) 그리고 결과

[Intialize via jacascript] 마지막으로 'mCustomscrollbar js' 구문을 작성하여 화면을 확인한다.

<script>
// 일반 호출
$(".content").mCustomScrollbar();

// 옵션 사용 호출
$(".content").mCustomScrollbar({
        theme:"dark",
        scrollButtons:{
    		enable:true
  	} 
});
</script>

 

 

! 결과화면 확인 !

 

 

 

7. 주로 사용하는 옵션

$(target).mCustomScrollbar('destroy');  // 순정 스크롤로 원복
$(target).mCustomScrollbar('disable');  // 스크롤 효과 없에기
$(target).mCustomScrollbar('update');   // 스크롤 다시 나타내기

$(target).mCustomScrollbar({              
    scrollInertia: 200,                 // 스크롤 시간
    scrollEasing: "easeOut",            // 스크롤 애니메이션 '이징'처리
    alwaysShowScrollbar : 2,            // 스크롤할 항목이 없어서 상시 표기
                                           (0_없에기,1_레일표기,2_상시표기)
    
    horizontalScroll:true,              // 스크롤 가로형    
    theme:"light",                      // 스크롤 컬러 테마

    mouseWheelPixels: 300,              // 마우스휠 속도
    mouseWheel:{ deltaFactor: 30 }      // 스크롤을 한바퀴 도는 픽셀 수 설정, 기본값으로는 'auto'가 있다.
                                           (os 혹은 브라우저 값을 사용)
});