SlimScroll滾動美化插件

下載：http://www.jq22.com/demo/jQuery-slimScroll-141223223505/jquery.slimscroll.js

DEMO：http://www.jq22.com/demo/jQuery-slimScroll-141223223505/

使用方法：

html——

<div id="area"> 內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容 </div>

javascript——

$('#area').slimscroll(options);

更多API：

$(function() {$(".slimscroll").slimScroll({width: 'auto', //可滾動區(qū)域?qū)挾萮eight: '100%', //可滾動區(qū)域高度size: '10px', //組件寬度color: '#000', //滾動條顏色position: 'right', //組件位置：left/rightdistance: '0px', //組件與側(cè)邊之間的距離start: 'top', //默認滾動位置：top/bottomopacity: .4, //滾動條透明度alwaysVisible: true, //是否 始終顯示組件disableFadeOut: false, //是否 鼠標經(jīng)過可滾動區(qū)域時顯示組件，離開時隱藏組件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' //軌道圓角}); });

手動滾動——

// 向上滾動50px $('#area_content').slimscroll({scrollBy: '-50px' });// 向下滾動50px $('#area_content').slimscroll({scrollBy: '50px' });

?滾動區(qū)域設(shè)置為父元素的高度——

$('#area').slimscroll({height: $('#area').parent().outerHeight(true)+'px', });

使用效果：

?

轉(zhuǎn)載于:https://www.cnblogs.com/mankii/p/10076438.html

總結(jié)

以上是生活随笔為你收集整理的s插件——SlimScroll滚动美化插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。