最近做了个聊天的项目所以需要向上滚动然后动态加载，于是我就把这一块单独提取出来弄成插件。
下面就是实现的效果
$.fn.extend({
scrollDetect: function(path, callback){
var self = this;
self[0].nodeScrollArr = {
isLock: false,
noteContentH: self.get(0).scrollHeight,
nodeScrollTop: self.scrollTop()
}
// 直接弄在arr上面他重新取值的话会被覆盖this.nodeScrollArr
self.bind('scroll',function() {
var scrollTop = self.scrollTop(),//滚动高度
viewH = self.height(),//可见高度
contentH = self.get(0).scrollHeight;//内容高度
if(!self[0].nodeScrollArr.isLock){
if(path == 'top' && scrollTop <= 5 && contentH > viewH + 20 && self[0].nodeScrollArr.nodeScrollTop > scrollTop){
self[0].nodeScrollArr.isLock = true;
//滚动条至页面 (滚动条存在) noteScrollTop > scrollTop这个是为了确定他是向下滚动的
self[0].nodeScrollArr.noteContentH = contentH;//记录当前的内容高度
callback && callback();
self[0].nodeScrollArr.isLock = false;
} else if(path == 'bottom' && contentH - viewH - scrollTop <= 5 && contentH > viewH + 20 && self[0].nodeScrollArr.nodeScrollTop < scrollTop) {
self[0].nodeScrollArr.isLock = true;
//滚动条至页面 (滚动条存在) noteScrollTop > scrollTop这个是为了确定他是向下滚动的
self[0].nodeScrollArr.noteContentH = contentH;//记录当前的内容高度
callback && callback();
self[0].nodeScrollArr.isLock = false;
}
}
self[0].nodeScrollArr.nodeScrollTop = scrollTop;
return self;
});
}
});
调用
$('#a1').scrollDetect('top', function(){
var getArr = fnAdd();
if(getArr) {
// console.log(getArr)
for(var i in getArr) {
arrAdd.unshift(getArr[i]);
}
draw('#a1',arrAdd);
console.log($('#a1'))
$('#a1').scrollTop($('#a1').get(0).scrollHeight - $('#a1')[0].nodeScrollArr.noteContentH);
} else {
fnTip(document.getElementsByClassName('tip1')[0]);
}
})
所有的代码模拟一下ajax请求：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<style type="text/css">
*{margin: 0; padding: 0;}
.scrollbox{ 300px; height: 400px; border:1px solid #999; margin: 50px auto; position: relative; overflow: hidden; }
.scrollContext{ 100%; height: 100%; overflow-y: auto;}
.font{padding: 5px; margin:10px 5px; border:1px solid #ccc; border-radius: 3px; 200px;}
.tip1,.tip2{z-index: 10; position: absolute; top: 3px; left: 50%; margin-left: -47px; 94px; height: 22px; line-height: 22px; background-color: #eee;
text-align: center; border-radius: 5px; color: #666; -webkit-transform-origin: top; -webkit-transform: scale(0); transition: 0.5s; opacity: 0; font-size: 12px;}
</style>
<body>
<div class="scrollbox">
<div class="tip1">没有更多消息</div>
<div class="scrollContext" id="a1"></div>
</div>
<script type="text/javascript">
(function(){
// 滚动方法
// 监控方向 目标 回调
// 这里的pos记得在外面定义一个全局的变量 否者pos.nodeScrollArr在外面是null的，没有这东西
$.fn.extend({
scrollDetect: function(path, callback){
var self = this;
self[0].nodeScrollArr = {
isLock: false,
noteContentH: self.get(0).scrollHeight,
nodeScrollTop: self.scrollTop()
}
// 直接弄在arr上面他重新取值的话会被覆盖this.nodeScrollArr
self.bind('scroll',function() {
var scrollTop = self.scrollTop(),//滚动高度
viewH = self.height(),//可见高度
contentH = self.get(0).scrollHeight;//内容高度
if(!self[0].nodeScrollArr.isLock){
if(path == 'top' && scrollTop <= 5 && contentH > viewH + 20 && self[0].nodeScrollArr.nodeScrollTop > scrollTop){
self[0].nodeScrollArr.isLock = true;
//滚动条(滚动条存在) noteScrollTop > scrollTop这个是为了确定他是向下滚动的
self[0].nodeScrollArr.noteContentH = contentH;//记录当前的内容高度
callback && callback();
self[0].nodeScrollArr.isLock = false;
} else if(path == 'bottom' && contentH - viewH - scrollTop <= 5 && contentH > viewH + 20 && self[0].nodeScrollArr.nodeScrollTop < scrollTop) {
self[0].nodeScrollArr.isLock = true;
//滚动条(滚动条存在) noteScrollTop > scrollTop这个是为了确定他是向下滚动的
self[0].nodeScrollArr.noteContentH = contentH;//记录当前的内容高度
callback && callback();
self[0].nodeScrollArr.isLock = false;
}
}
self[0].nodeScrollArr.nodeScrollTop = scrollTop;
return self;
});
}
});
var arrAdd = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var arrchildAdd = [70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,90,91,92,93,94,95,23,24,25,26,27,28,29,30];
function draw(tag,arr) {
var html = '';
for(var i in arr) {
html += '<p class="font">'+arr[i]+'</p>';
}
$(tag).html(html);
}
draw('#a1',arrAdd);
$('#a1').scrollTop($('#a1').get(0).scrollHeight);//到底部
$('#a1').scrollDetect('top', function(){
var getArr = fnAdd();
if(getArr) {
// console.log(getArr)
for(var i in getArr) {
arrAdd.unshift(getArr[i]);
}
draw('#a1',arrAdd);
console.log($('#a1'))
$('#a1').scrollTop($('#a1').get(0).scrollHeight - $('#a1')[0].nodeScrollArr.noteContentH);
} else {
fnTip(document.getElementsByClassName('tip1')[0]);
}
})
// 提示方法
function fnTip(tip) {
tip.style.WebkitTransform="scale(1)";
tip.style.opacity=1;
setTimeout(function(){
tip.style.WebkitTransform="scale(0)";
tip.style.opacity=0;
},1000);
}
var add = 0;
//模拟请求接口返回数据
function fnAdd(){
add++;
if(add > 3) {
return null;
} else {
var returnArr = [];
for(var i = add*10 - 10; i < add*10;i++) {
returnArr.push(arrchildAdd[i]);
}
return returnArr;
}
}
})();
</script>
</body>
</html>
//滚动条是否在底部
dom[0].scrollTop + dom.height() === dom[0].scrollHeight
滚动条在Y轴上的滚动距离 + 内容可视区域的高度 === 内容可视区域的高度加上溢出（滚动）的距离