如何自訂 Scrollbar 的捲軸樣式

在規劃活動網站的設計時,會常遇到需要放置一些注意事項或者活動辦法的訊息,這類資訊通常會比較長篇,內容也比較乏味,但它對活動網站來說又很重要。如果沒有經過適當的整理,往往都會佔據較大的頁面空間,造成編排上的麻煩。因此大多數的時候,網頁設計師們會將這類資訊放在有 Scrollbar 的區塊內,讓這些長篇的內容可以控制在固定的範圍內。但這樣做又會產生一個新問題,那就是瀏覽器預設的 Scrollbar 樣式和網站的風格相比,如果沒有經過特別的處理會顯得非常突兀,而 jQuery custom content scroller 是一個 jQuery 的外掛,可以用來自訂上述所需的 Scrollbar 捲軸樣式,讓你在設計畫面時,可以配合網站的視覺來調整適當的 Scrollbar 樣式。

  1. 下載:jQuery custom content scroller
  2. 效果預覽:jQuery custom scrollbar Demo

簡單的使用教學

第一步:解壓縮

請先下載 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。預設的樣式名稱如下:

  1. dark
  2. minimal-dark
  3. light-thick
  4. rounded-dots
  5. dark-thin
  6. light-3
  7. 3d-thick
  8. 3d
  9. 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 官網查詢。

One Comment

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料