Notice
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 이미지에 다중링크걸기
- 모바일 사용자를 위해 올바른 HTML input type
- niceselect사용법
- iCalendar
- json-server 사용하기
- 이미지에 링크여러개
- 카카오 Maps
- node메일보내기
- 노개북
- 변수선언방법
- Array 내장함수
- book_club
- 텍스트입력 라이브러리
- js Array 내장함수
- select플러그인
- 자바스크립트 변수 차이점
- 카카오 Maps API
- plugin
- jqueryplugin
- book-club-it-dictionary
- 이미지에 링크여러개걸기
- json-server 서버설치
- node.js이메일보내기
- vue 카카오 Maps API
- 개발자북클럽
- 노마드코더
- vue Maps API
- 텍스트서식태그
- node.js 로그관리
- 의미있는태그
Archives
- Today
- Total
ㅇㅅㅇ
[JQUERY] 스크롤바를 커스텀해주는 plugin mCustomScrollbar 본문
스크롤바를 커스텀 할 때 주로 사용하는 플러그인
매번 찾아보게 되서 자주 사용하는 것들만 적어본다
사이트는 여기▼
기본 사용방법
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>
테마명예시는 아래에서 확인할 수 있다.
4. scrollTop
일반 스크롤바 제어하듯이 .scrollTop()을 사용하면 안 된다.
스크롤 바를 제어가 필요하다면 mCustomScrollbar에서 제공하는 scrollTo을 사용하면 된다.
/*
$(selector).mCustomScrollbar("scrollTo",방향,옵션);
*/
$('.content').mCustomScrollbar("scrollTo","top",{
scrollInertia:100 // 스크롤 시간(초)
});
다양한 옵션은 플러그인 사이트에서, 사용예시는 아래를 참고하자
'프로그래밍 > JQUERY' 카테고리의 다른 글
[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법2 (0) | 2022.04.28 |
---|---|
[JQUERY] select를 예쁘게 바꿔주는 플러그인 niceSelect 사용법1 (0) | 2022.04.26 |
[JQUERY] 음원재생, 일시정지, 정지 버튼 만들기 (1) | 2021.04.30 |
[JQUERY] 스크롤 모션 - 가로스크롤 처음과 끝을 감지하기 (0) | 2021.01.11 |
[JQUERY] IE에서도 이미지 흑백처리하기 CSS + Grayscale.js (0) | 2021.01.05 |
Comments