1. slimscroll
- 介紹：
把任何div元素包裹的內容區加上具有好的滾動條。slimscroll不佔用任何視覺空間，它只出現在一個用戶啓動的鼠標。用戶可以拖動滾動條或使用鼠標滾輪改變滾動值。
- 使用方式：
- 全局引入：
npm install jquery-slimscroll
- 引入jq和slimscroll.js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
- 參數設置：
$(obj).slimScroll({
width: 'auto', //可滾動區域寬度
height: '100%', //可滾動區域高度
size: '10px', //組件寬度
color: '#000', //滾動條顏色
position: 'right', //組件位置：left/right
distance: '0px', //組件與側邊之間的距離
start: 'top', //默認滾動位置：top/bottom
opacity: .4, //滾動條透明度
alwaysVisible: true, //是否 始終顯示組件
disableFadeOut: false, //是否 鼠標經過可滾動區域時顯示組件，離開時隱藏組件
railVisible: true, //是否 顯示軌道
railColor: '#333', //軌道顏色
railOpacity: .2, //軌道透明度
railDraggable: true, //是否 滾動條可拖動
railClass: 'slimScrollRail', //軌道div類名
barClass: 'slimScrollBar', //滾動條div類名
wrapperClass: 'slimScrollDiv', //外包div類名
allowPageScroll: true, //是否 使用滾輪到達頂端/底端時，滾動窗口
wheelStep: 20, //滾輪滾動量
touchScrollStep: 200, //滾動量當用戶使用手勢
borderRadius: '7px', //滾動條圓角
railBorderRadius: '7px' //軌道圓角
});
- 事件：
$(selector).slimScroll().bind('slimscroll', function(e, pos){
console.log("Reached " + pos);
});//當滾動條達到父容器的頂部或底部時觸發
- 示例：
<style>
.scroller{
width: 500px;
height: 50px;
margin: 0 auto;
}
</style>
<div class="scroller" data-height="100px" data-always-visible="1" data-rail-visible="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.
Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<script>
$(document).ready(function () {
$(".scroller").slimScroll({
height: 100,
alwaysVisible: false
});
});
</script>
注：一定在DOM加載完才能爲元素綁定插件，即需要當DOM元素加載完成纔可進行插件的初始化
官網地址：http://rocha.la/jQuery-slimScroll
2. nicescroll
-
介紹
一款完全基於 jQuery 框架的滾動條插件，它不僅有着類似 iOS 系統設備的滾動條外觀，而且還支持任意的<div>、<iframe>、<body>元素的滾動效果。 -
特點
1.不需要增加額外的 CSS。
2.幾乎全瀏覽器兼容：Chrome、Firefox、Edge、IE8+、Safari、Opera
3.實現只需要一段代碼，侵入性非常小。
4.樣式可完全自定義。
5.支持觸摸事件，可在觸摸屏上使用。 -
使用方式
頁面中引入 jquery.js和jquery.nicescroll.js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
- 參數設置
$(obj).niceScroll({
cursorcolor: "#424242", // 改變滾動條顏色，使用16進制顏色值
cursoropacitymin: 0, // 當滾動條是隱藏狀態時改變透明度, 值範圍 1 到 0
cursoropacitymax: 1, // 當滾動條是顯示狀態時改變透明度, 值範圍 1 到 0
cursorwidth: "5px", // 滾動條的寬度，單位：便素
cursorborder: "1px solid #fff", // CSS方式定義滾動條邊框
cursorborderradius: "5px", // 滾動條圓角（像素）
zindex: "auto" | <number>, // 改變滾動條的DIV的z-index值
scrollspeed: 60, // 滾動速度
mousescrollstep: 40, // 鼠標滾輪的滾動速度 (像素)
touchbehavior: false, // 激活拖拽滾動
hwacceleration: true, // 激活硬件加速
boxzoom: false, // 激活放大box的內容（是否激活全屏放大顯示）
dblclickzoom: true, // (僅當 boxzoom=true時有效)雙擊box時放大
gesturezoom: true, // (僅 boxzoom=true 和觸屏設備時有效) 激活變焦當out/in（兩個手指外張或收縮）
grabcursorenabled: true // (僅當 touchbehavior=true) 顯示“抓住”圖標display "grab" icon
autohidemode: true, // 隱藏滾動條的方式, 可用的值:
true | // 無滾動時隱藏
"cursor" | // 隱藏
false | // 不隱藏,
"leave" | // 僅在指針離開內容時隱藏
"hidden" | // 一直隱藏
"scroll", // 僅在滾動時顯示
background: "", // 軌道的背景顏色
iframeautoresize: true, // 在加載事件時自動重置iframe大小
cursorminheight: 32, // 設置滾動條的最小高度 (像素)
preservenativescrolling: true, // 你可以用鼠標滾動可滾動區域的滾動條和增加鼠標滾輪事件
railoffset: false, // 可以使用top/left來修正位置
bouncescroll: false, // (only hw accell) 啓用滾動跳躍的內容移動
spacebarenabled: true, // 當按下空格時使頁面向下滾動
railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 設置軌道的內間距
disableoutline: true, // 當選中一個使用nicescroll的div時，chrome瀏覽器中禁用outline
horizrailenabled: true, // nicescroll可以管理水平滾動
railalign: right, // 對齊垂直軌道
railvalign: bottom, // 對齊水平軌道
enabletranslate3d: true, // nicescroll 可以使用CSS變型來滾動內容
enablemousewheel: true, // nicescroll可以管理鼠標滾輪事件
enablekeyboard: true, // nicescroll可以管理鍵盤事件
smoothscroll: true, // ease動畫滾動
sensitiverail: true, // 單擊軌道產生滾動
enablemouselockapi: true, // 可以用鼠標鎖定API標題 (類似對象拖動)
cursorfixedheight: false, // 修正光標的高度（像素）
hidecursordelay: 400, // 設置滾動條淡出的延遲時間（毫秒）
directionlockdeadzone: 6, // 設定死區，爲激活方向鎖定（像素）
nativeparentscrolling: true, // 檢測內容底部便於讓父級滾動
enablescrollonselection: true, // 當選擇文本時激活內容自動滾動
cursordragspeed: 0.3, // 設置拖拽的速度
rtlmode: "auto", // DIV的水平滾動從左邊開始
cursordragontouch: false, // 使用觸屏模式來實現拖拽
oneaxismousemode: "auto", // 當只有水平滾動時可以用鼠標滾輪來滾動，如果設爲false則不支持水平滾動，如果設爲auto支持雙軸滾動
scriptpath: "" // 爲boxmode圖片自定義路徑 ("" => same script path)
preventmultitouchscrolling: true // 防止多觸點事件引發滾動
});
注：一定在DOM加載完才能爲元素綁定插件，即需要當DOM元素加載完成纔可進行插件的初始化
- 事件
$(obj).getNiceScroll().hide();:隱藏滾動條
$(obj).getNiceScroll().resize();：檢測滾動條是否重置大小（當窗口改變大小時）
$(obj).getNiceScroll(0).doScrollLeft(x, duration); // X軸方向$(obj).getNiceScroll(0).doScrollTop(y, duration); // Y軸方向：滾動到某個位置
- 示例：
<style>
.scroller{
width: 500px;
height: 50px;
margin: 0 auto;
}
</style>
<div class="scroller" data-height="100px" data-always-visible="1" data-rail-visible="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Cras sit amet erat sit amet lacus egestas placerat. Aenean ultricies ultrices mauris ac congue. In vel tortor vel velit tristique tempus ac id nisi. Proin quis lorem velit. Nunc dui dui, blandit a ullamcorper vitae, congue fringilla lectus. Aliquam ultricies malesuada feugiat. Vestibulum placerat turpis et eros lobortis vel semper sapien pulvinar.
Pellentesque rhoncus aliquet porta. Sed vel magna eu turpis pharetra consequat ut vitae lectus. In molestie sollicitudin mi sit amet convallis. Aliquam erat volutpat. Nullam feugiat placerat ipsum eget malesuada. Nulla facilisis nunc non dolor vehicula pretium. Sed dui magna, sodales id pharetra non, ullamcorper eu sapien. Mauris ac consectetur leo. Mauris consequat, lectus ut bibendum pulvinar, leo magna feugiat enim, eu commodo lacus sem vel ante. Sed tempus metus eget leo mollis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</div>
<script>
$(document).ready(function () {
$(".scroller").niceScroll();
});
</script>
官網地址：http://www.areaaperta.com/nicescroll/
Github地址：https://github.com/inuyaksa/jquery.nicescroll