【前端庫】jscrollpane.js 自定義滾動條
阿新 • • 發佈：2019-01-28
前言
jScrollPane是一個jQuery外掛，它允許用HTML結構替換瀏覽器的預設滾動條（在具有溢位的元素上：auto），可以在css中自定義html。jScrollPane的設計靈活但非常易於使用。在您 下載並將相關檔案包含在文件頭部之後，您只需呼叫一個JavaScript函式來初始化滾動窗格。您可以使用CSS輕鬆設定結果滾動條的樣式，或從現有主題中進行選擇 。展示了jScrollPane的不同特性以及獲得支援的多種方法，有許多不同的示例。
地址
安裝
直接引入
<!DOCTYPE html>
<html lang="en" 構建工具
第一步：輸入
npm install -g grunt-cli第二步：進入build檔案目錄
cd build第三步：輸入
grunt手冊
| 屬性及方法 | 型別 | 說明 |
|---|---|---|
| showArrows | boolean | (預設值：false) 。顯示滑桿兩邊的箭頭 |
| maintainPosition | boolean | (預設值：true)。保持原位置 |
| stickToBottom | boolean | (預設：false)。滑到底部 |
| stickToRight | boolean | (預設：false)。滑到最右邊 |
| autoReinitialise | boolean | (預設：false)。自動加載出現滑桿 |
| autoReinitialiseDelay | int | (預設 500)//自動載入的時間延遲 |
| verticalDragMinHeight | int | (預設 0)//垂直拖拽的最小高度 |
| verticalDragMaxHeight | int | (預設 0 99999)//處置拖拽的最大高度 |
| horizontalDragMinWidth | int | (預設 0)//水平拖拽的長度 |
| horizontalDragMaxWidth | int | (預設 99999)//水平拖拽的最大長度 |
| contentWidth | int | (預設 undefined)//內幕內用的寬度 |
| animateScroll | boolean | (預設 false)//滾動動畫 |
| animateDuration | int | (預設 300)//動畫延遲 |
| animateEase | string | (預設 ‘linear’)//動畫軌跡 |
| hijackInternalLinks | boolean | (預設 false)//截獲內部連結 |
| verticalGutter | int | (預設 4)//處置不掉長度 |
| horizontalGutter | int | (預設 4)//水平不掉長度 |
| mouseWheelSpeed | int | (預設 10)//滑鼠疼速度 |
| arrowButtonSpeed | int | (預設 10)//方向鍵按鈕的速度 |
| arrowRepeatFreq | int | (預設 100)//按鈕事件重複頻率 |
| arrowScrollOnHover | boolean | (預設 false)//接手滑鼠在方向鍵上滑過的動作 |
| verticalArrowPositions | string | [split或者before或者after或者os] (預設 split)//垂直方向上按鈕的位置 |
| horizontalArrowPositions | string | [split或者before或者after或者os] (預設 split)//水平方向上按鈕的位置 |
| enableKeyboardNavigation | boolean | (預設 true)//是否接受鍵盤操作 |
| hideFocus | boolean | (預設 false)//隱藏焦點 |
| clickOnTrack | boolean | (預設 true)//路徑上點選操作 |
| trackClickSpeed | int | (預設 30)//互動軌跡上的點選速度 |
| trackClickRepeatFreq | int | (預設 100)//滑動軌跡上的重複頻率 |
案例
這裡自定義的很多東西，都是使用class類來控制話，那麼自定義一些樣式，比如加背景圖片啊，自定義按鈕圖示啊，自定義背景顏色
基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<link href="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/style/jquery.jscrollpane.css" rel="stylesheet">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scroller {
width: 240px;
height: 140px;
overflow: hidden;
}
</style>
</head>
<body>
<!-- <div id="app"></div> -->
<div class="scroller" style="">
<p>我知道我是一個沒車沒房得人，顏值還是那麼低，也不說話。</p>
<p>我不敢靠近你，這就是理由</p>
<p>等到我靠近你，才發現我，喜歡上你了。</p>
<p> 等我想真正得追你得時候，才發現已經晚了</p>
<p>不知道還有沒有機會，成為你得另一半了。</p>
<p>陪伴到老</p>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jScrollPane/2.1.3-rc.1/script/jquery.jscrollpane.js"></script>
<script type="text/javascript">
$(function() {
$('.scroller').jScrollPane();
});
</script>
</body>
</html>按照上面得方法來寫
showArrows
滾動條兩邊
$('.scroll-pane').jScrollPane(
);