相對漂亮的滾動條slimscroll可以實現下拉加載

在之前的開發中遇到過下拉加載想要漂亮點的滾動條，但是最初引入的mCustomScrollbar發現不適合我當前的下拉加載模式(當然肯定有其他辦法，但是我習慣了現在的下拉加載模式)。

我的下拉加載用的是檢測滾動條位置來判斷是否加載更多

var nScrollHight = 0; //滾動距離總長(注意不是滾動條的長度)
var nScrollTop = 0; //滾動到的當前位置
var $frame = $("#div_content");
var nDivHight = $frame.height()+10;
$frame.on("scroll touchmove", function () {
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
if (Number(nScrollTop) + Number(nDivHight) >= Number(nScrollHight)) {
// 觸發事件，這里可以用AJAX拉取下頁的數數據
listMore();
};
});

 

如果用mCustomScrollbar.js就檢測不了滾動條位置，因為它滾動的機制是用絕對定位，然后改變top；

而且mCustomScrollbar用起也比較麻煩，要引入js和css。

后來發現了slimscroll能適應我的下拉加載模式，slimscroll的使用方法就是給傳統滾動需要設置overflow-y:auto的容器執行一個方法

$('#div_content').slimScroll({
height: 'auto',
color: '#000',
//size:"7px",
alwaysVisible: true,
railVisible: true,
railColor: '#333333',
railOpacity: 0.2,
wheelStep: 10,
disableFadeOut: true
});

這下我就有了相對漂亮的滾動條實現下拉加載拉

插件和使用方法說明：http://files.cnblogs.com/files/qiny-easyui/slimScroll201603221516.zip