本類文章依舊是針對初學者來說的，希望大家看到后覺得有用的能給個贊~~
什么是slimScroll?
一、官網介紹：
slimScroll is a small (4.6KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar.slimScroll doesn’t occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.
它的大致意思是這樣的（自己翻譯的，如果大家覺得哪里有錯麻煩聯系我或者在下面評論告知我也可以，謝謝大家）：
slimScroll是一個4.6kb的很小的jQuery插件，可將任何div轉換成一個帶有好看的滾動條的可滾動區域。slimScroll不占用任何視覺空間，因為它只出現在用戶鼠標移入到這個div上的時候，也就是說，當用戶進行onmouseover等鼠標移入的動作，這個好看的滾動條才會顯示出來。用戶可以拖動滾動條或使用鼠標滾輪改變滾動值。
不過，這個slimscroll插件不支持resize的時候重新調用插件，但是有人已經修改過源碼，下面是源碼和修改過的源碼的地址：
1、源碼地址：https://github.com/rochal/jQuery-slimScroll
2、修改過的源碼地址：https://github.com/kujian/jQuery-slimScroll
二、使用方法：
1、因為slimScroll在使用的時候要依賴JQuery，所以首次使用的時候要先引入JQuery再引入simScroll插件.(路徑什么的大家自己根據需要來改哈)
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.slimscroll.min.js"></script>
2、在將要設置的內容外加div元素包裹（p標簽內為我要設置的內容）
<div id="inner-content"> <p>土豆絲，可樂雞翅，酸湯肥牛，糖醋小排，芝士披薩，酸菜魚，水煮魚，毛血旺，烤冷面，酸辣粉，過橋米線，酸辣米粉。
土豆絲，可樂雞翅，酸湯肥牛，糖醋小排，芝士披薩，酸菜魚，水煮魚，毛血旺，烤冷面，酸辣粉，過橋米線，酸辣米粉。
土豆絲，可樂雞翅，酸湯肥牛，糖醋小排，芝士披薩，酸菜魚，水煮魚，毛血旺，烤冷面，酸辣粉，過橋米線，酸辣米粉。
土豆絲，可樂雞翅，酸湯肥牛，糖醋小排，芝士披薩，酸菜魚，水煮魚，毛血旺，烤冷面，酸辣粉，過橋米線，酸辣米粉。
土豆絲，可樂雞翅，酸湯肥牛，糖醋小排，芝士披薩，酸菜魚，水煮魚，毛血旺，烤冷面，酸辣粉，過橋米線，酸辣米粉。
</p>
</div>
3、調用slimscroll插件及設置參數：
<script type="text/javascript">
$(function(){
$("#inner-content").slimScroll({ height: '300px' });
})
</script>
三、這里有大部分參數設置，大家了解下：
$(function() { $("#inner-content").slimScroll({ width: '100%', //可滾動區域寬度 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' //軌道圓角 }); });
四、slimScroll事件——當滾動條達到父容器的頂部或底部觸發事件：
$(selector).slimScroll().bind('slimscroll', function(e, pos){
console.log("Reached " + pos");
});
eg:
$(function(){ $('#innerDiv').slimScroll({ height: '700px' }); $('#innerDiv').slimScroll().bind('slimscroll', function(e, pos){ if(pos=='bottom'){ // 執行其他邏輯 } }); });
大家如果覺得不直觀，想看看例子的話，就去這個網址看吧：http://www.jq22.com/demo/jQuery-slimScroll-141223223505/
好~就這樣~如果大家覺得對你們有幫助就贊一個！謝謝~