jQuery custom content scroller

웹 페이지의 일부 영역에 스크롤바를 붙이고 싶은가? 그렇다면, 여기에 jQuery 라이브러리를 활용해서 손쉽게 처리하는 방법이 있다. 현재 이 블로그에 적용된 라이브러리이기도 하다.

상세한 사용방법은 다음 사이트에서 확인할 수 있다.

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

라이브러리는 다음 주소에서 다운로드 받을 수 있다.

https://github.com/malihu/malihu-custom-scrollbar-plugin

적용방법을 간략히 기술하자면,

우선, HTML의 HEAD 영역에 다음과 같이 CSS와 자바스크립트를 연결시켜준다.

<link rel="stylesheet" href="jquery.mCustomScrollbar.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>

그리고, 스크롤바를 적용하고자 하는 영역(주로 DIV)에 mCustomScrollbar() 메서드를 실행시켜주면 끝이다.

$(document).ready(function(){
	$(".content").mCustomScrollbar();
});

메서드의 매개변수를 통해서 스크롤러의 테마 등 다양한 옵션을 지정할 수 있으니 해당 웹사이트를 방문해서 살펴보기 바란다.