首页 > 其他 > 详细

相对漂亮的滚动条slimscroll可以实现下拉加载

时间:2016-03-23 16:55:39      阅读:160      评论:0      收藏:0      [点我收藏+]

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

相对漂亮的滚动条slimscroll可以实现下拉加载

原文:http://www.cnblogs.com/qiny-easyui/p/5311442.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!