一.效果图(其中未设置数据加载动画,请自行设置)
二.使用
<!--引用js-->
<script src='drop.down.ref.js'></script>
<script>
var count = 0;
ref.refresh(function () {
document.body.innerHTML+="<div style='color:white;height:200px;width:100%;background:#"+(count+1)*114+"'>这是第"+count+"块div</div>";
count++;
if (count >= 5) {
document.body.innerHTML+="<div style='color:white;height:200px;width:100%;background:#"+(count+1)*114+"'>这是最后一块div,方法在不触发</div>";
return true;
}
return false;
});
</script>
三.插件代码
(function(window){
window.ref={
isRef:false,
getScrollTop:function() {
if (document.documentElement && document.documentElement.scrollTop) {
return document.documentElement.scrollTop;
}
if (document.body) {
return document.body.scrollTop;
}
},
getClientHeight:function () {
if(document.body.clientHeight && document.documentElement.clientHeight) {
return Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
return Math.max(document.body.clientHeight, document.documentElement.clientHeight);
},
getScrollHeight:function() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
},
refresh: function (fn){
window.onscroll = function() {
if((ref.getScrollTop() +ref.getClientHeight() >= ref.getScrollHeight()||ref.getScrollTop() +screen.height >= ref.getScrollHeight())&&!ref.isRef) {
if(typeof fn=="function"){
ref.isRef=fn();
return;
}
ref.isRef=true;
}
}
}
}
window.ref=ref;
})(window);