java滚动条下拉_[Java教程]相对漂亮的滚动条slimscroll可以实现下拉加载

[Java教程]相对漂亮的滚动条slimscroll可以实现下拉加载

0 2016-03-23 16:00:05

在之前的开发中遇到过下拉加载想要漂亮点的滚动条，但是最初引入的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

本文网址：http://www.shaoqun.com/a/205233.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0