jScrollPane – 創建定製化的滾動條

jScrollPane是一款優秀的jQuery插件，它能夠同定製化的方式為網頁中的元素創建滾動條。這個插件的設計初衷是解決瀏覽器默認滾動條不美觀、不易定製化的問題。jScrollPane不僅允許我們在頁面上使用自己喜歡的樣式創建滾動條，還能為滾動條增加各種事件以及自定義滾動條的寬度和高度。本文將會介紹jScrollPane插件的基本使用方法、如何配置滾動條的外觀、使用事件監聽器以及如何為滾動條自定義滾動速度等各種高級應用。

一、基本使用

首先需要下載jScrollPane插件，可以從GitHub或者官方網站（http://jscrollpane.kelvinluck.com/）獲取到該插件。下載下來後將jquery.jscrollpane.min.js和jquery.mousewheel.js兩個文件添加到你的項目中，並在HTML頁面中引用。

<head>
    ...
    <link href="path/to/jquery.jscrollpane.css" rel="stylesheet" type="text/css">
    <script src="path/to/jquery.js" type="text/javascript"></script>
    <script src="path/to/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="path/to/jquery.jscrollpane.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.scroll-pane').jScrollPane();
        });
    </script>
</head>
<body>
    <div class="scroll-pane">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit nulla ipsum, eu fringilla odio pharetra sed. Nullam in efficitur odio, quis finibus sem. In ac mi mollis, blandit odio posuere, bibendum velit. Mauris feugiat porttitor molestie. Integer ultricies libero ac justo varius bibendum. Duis porttitor iaculis est, sit amet lobortis nisi porttitor vitae. Suspendisse et nibh vel augue mattis consequat et a neque. Donec lacus urna, gravida non tincidunt sit amet, consectetur vitae turpis. Integer congue convallis consequat. Ut faucibus hendrerit bibendum. Aenean blandit, turpis eu consequat ultrices, nisl odio tincidunt tortor, ut rhoncus odio nisl vitae ipsum.</p>
    </div>
</body>

上述代碼可以為任意div元素創建一個基本的滾動條，在實際開發中我們可以通過修改CSS樣式表來定製化滾動條的外觀。如果需要為頁面上多個元素添加滾動條，則可以在每個需要添加滾動條的元素上調用jScrollPane方法，如下示例：

$(document).ready(function() {
    $('.scroll-pane').jScrollPane();
    $('.custom-scroll-pane').jScrollPane({
        showArrows: true,
        verticalGutter: 30
    });
});

二、定製化滾動條的外觀

jScrollPane的一個最大優點就是可以根據項目需要配置滾動條的外觀，比如修改滾動條的大小、更換滾動條的圖標、顯示箭頭，這些都能夠通過修改CSS樣式表或在js中傳入參數來實現。

1. 改變滾動條的大小

滾動條的大小（即寬度和高度）可以在CSS樣式表中設置，比如：

.scroll-pane {
    width: 200px;
    height: 300px;
}

.jspVerticalBar {
    width: 10px;
    background: #000;
}

.jspDrag {
    background: #ccc;
}

上面的代碼為一個元素創建了一個寬度為200px，高度為300px的滾動區域，同時將垂直滾動條的寬度設置為10px，滾動條的背景色為黑色，拖動條的背景色為灰色。

2. 更換滾動條的圖標

jScrollPane默認使用了兩張圖片作為滾動條的圖標，這兩張圖片也可以更換為自定義的圖片。下面我們使用自定義的圖片來替代默認的滾動條圖標：

.scroll-pane {
    width: 200px;
    height: 300px;
}

.jspVerticalBar {
    width: 10px;
    background: #FFF url('img/scrollbar_vert.gif') 0 0 repeat-y;
}

.jspHorizontalBar {
    height: 10px;
    background: #FFF url('img/scrollbar_horz.gif') 0 0 repeat-x;
}

.jspDrag {
    background: url('img/drag.gif') no-repeat;
}

上面的代碼將圖片路徑設置為相對路徑，並將垂直滾動條和水平滾動條的背景圖替換成自定義圖標，同時拖動時也使用自定義的圖標。

3. 顯示箭頭

使用showArrows參數可以在滾動條的兩端顯示小尖角，表示可以滑動的方向。下面的代碼將為垂直滾動條顯示箭頭：

$('.scroll-pane').jScrollPane({
    showArrows: true
});

三、事件監聽器

jScrollPane也支持各種事件監聽器，可以根據需要調用相應的事件來完成各種效果。下面我們將介紹一些常用的事件監聽器。

1. 滾動條滑動事件監聽器

可以通過監聽滑動條的滾動事件，來實現滑動時執行相應的代碼。下面的代碼將在垂直滾動條滑動時控制台輸出當前滾動條的位置：

$('.scroll-pane').bind(
    'jsp-scroll-y',
    function(event, scrollPositionY, isAtTop, isAtBottom) {
        console.log('Scroll position:', scrollPositionY);
    }
);

2. 滾動區域大小改變時事件監聽器

可以通過監聽滾動區域尺寸改變事件，來實現滾動區域大小改變時執行相應的代碼。下面的代碼將在滾動區域大小變化時控制台輸出當前滾動區域的寬度和高度：

$('.scroll-pane').bind(
    'jsp-initialised',
    function(event, isScrollable) {
        console.log('Scrollable:', isScrollable, 'Width:', $('.scroll-pane').width(), 'Height:', $('.scroll-pane').height());
    }
);

四、高級應用

1. 修改滾動速度

可以使用mouseWheelSpeed參數來修改用滑鼠滾輪滾動時的速度，下面的代碼將修改滑鼠滾輪滑動時的滾動速度：

$('.scroll-pane').jScrollPane({
    mouseWheelSpeed: 50
});

2. 滾動條自動隱藏

可以通過設置autoReinitialise和autoReinitialiseDelay兩個參數，實現滾動條自動隱藏的功能。autoReinitialise參數表示是否自動隱藏滾動條，autoReinitialiseDelay表示多久後自動隱藏滾動條。下面的代碼將實現當滑鼠離開滾動區域時，滾動條隱藏，並在滑鼠移入時重新顯示滾動條：

$('.scroll-pane').jScrollPane({
    autoReinitialise: true,
    autoReinitialiseDelay: 500
});

3. 橫向滾動條自動適應內容寬度

可以通過設置horizontalGutter參數為-16，實現橫向滾動條自適應內容寬度的功能。下面的代碼將實現當滾動內容的寬度小於滾動區域的寬度時，隱藏橫向滾動條：

$('.scroll-pane').jScrollPane({
    horizontalGutter: -16
});

如果你足夠了解這個插件，那麼你還可以使用API調用jScrollPane中的各種方法，實現更加靈活的滾動條定製化。

結語

本文介紹了jScrollPane插件的基本使用，如何定製化滾動條的外觀，使用事件監聽器以及如何實現一些高級應用。jScrollPane插件已經成為了優秀的jQuery插件，其精緻的設計和豐富的功能極大的豐富了Web開發的工具箱。我們可以根據需要使用它自定義網頁中的滾動條，這樣做不僅可以提高用戶體驗，還可以讓我們的項目更加獨具特色。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/189420.html

jScrollPane – 創建定製化的滾動條

一、 基本使用

二、 定製化滾動條的外觀