在規劃活動網站的設計時，會常遇到需要放置一些注意事項或者活動辦法的訊息，這類資訊通常會比較長篇，內容也比較乏味，但它對活動網站來說又很重要。如果沒有經過適當的整理，往往都會佔據較大的頁面空間，造成編排上的麻煩。因此大多數的時候，網頁設計師們會將這類資訊放在有 Scrollbar 的區塊內，讓這些長篇的內容可以控制在固定的範圍內。但這樣做又會產生一個新問題，那就是瀏覽器預設的 Scrollbar 樣式和網站的風格相比，如果沒有經過特別的處理會顯得非常突兀，而 jQuery custom content scroller 是一個 jQuery 的外掛，可以用來自訂上述所需的 Scrollbar 捲軸樣式，讓你在設計畫面時，可以配合網站的視覺來調整適當的 Scrollbar 樣式。
簡單的使用教學
第一步：解壓縮
請先下載 jQuery custom content scroller，完成後請解壓縮，將裡面的 jquery.mCustomScrollbar.css 和 jquery.mCustomScrollbar.min.js 取出。
第二步：載入相關檔案
將 jquery.mCustomScrollbar.css 和 jquery.mCustomScrollbar.min.js 放置於 head 的標籤內，由於這個外掛需要使用 jQuery，所以 jQuery 也需要在這個步驟引入。
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css"> <script src="jquery.mCustomScrollbar.min.js"></script> </head>
第三步：初始化 mCustomScrollbar
一樣放在 head 的標籤內，.content 可以自由命名。
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>
第四步：設定工作區塊和挑選捲軸樣式
一、增加一個名為 .content 的 class
二、接著設定捲軸的樣式，範例使用的樣式為 dark。預設的樣式名稱如下：
- dark
- minimal-dark
- light-thick
- rounded-dots
- dark-thin
- light-3
- 3d-thick
- 3d
- rounded
如果你要先預覽樣式的效果，請參考 jQuery custom scrollbar Demo。
<div class="content" data-mcs-theme="dark">
<p>捲軸範例</p>
<p>捲軸範例</p>
<p>捲軸範例</p>
<p>捲軸範例</p>
<p>捲軸範例</p>
<p>捲軸範例</p>
<p>捲軸範例</p>
<p>捲軸範例</p>
<p>捲軸範例</p>
<p>捲軸範例</p>
</div>
第五步：設定 .content 的 CSS 樣式
由於我們使用 DIV 來設定區塊，因此我們要用 CSS 為這個 DIV 設定一個顯示範圍，如果區塊的文字內容超出這個範圍的話，就會出現 Scrollbar 捲軸。當然，CSS 的內容你可以自訂，下面只是範例：
<style>
.content{
padding:20px;
background:#ccc;
width:150px;
height:150px;
}
</style>
進階的初始化設定
到目前為止，Scroolbar 的功能已經完成，但在第三步的時候我們只做了一些簡單的初始化，其實 jquery-custom-content-scroller 還提供許多參數可供使用，方便簡化頁面的 HTML & CSS 及一些進階設定，基本的設定方式如下：
<script>
(function($){
$(window).load(function(){
$(".content").mCustomScrollbar({
theme:"dark", // 設定捲軸樣式
setWidth: 350, // 設定寬度
setHeight: 150, // 設定高度
});
});
})(jQuery);
</script>
更多的參數可到 jquery-custom-content-scroller 官網查詢。
