相對漂亮的滾動條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