js实现当滚动条滚动到页面底部自动加载增加内容，ajax加载数据

2021-11-28 网页编程网 网页编程网

<html>
<head>
<meta charset="utf-8">
</head>
<body>
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
滚动到页面底部自动加载增加内容
<script>
//滑动
function getScrollTop(){
var scrollTop = 0
if(document.documentElement && document.documentElement.scrollTop) {
 scrollTop = document.documentElement.scrollTop;
 }else if (document.body) {
 scrollTop = document.body.scrollTop;
 }
 return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight(){
var clientHeight = 0
 if (document.body.clientHeight && document.documentElement.clientHeight) {
 clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
 }else {
 clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
 }
 return clientHeight;
}
//获取文档完整的高度
function getScrollHeight(){
 return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
var i=0//传加载次数
//绑定事件
window.onscroll = function (){
console.log('1.getScrollTop',getScrollTop())
console.log('2.getClientHeight',getClientHeight())
console.log('3.getScrollHeight',getScrollHeight())

if (getScrollTop() + getClientHeight() +1> getScrollHeight()) {
alert((++i)+'次到达底部')
//生成新节点
var newnode = document.createElement("a");
newnode.setAttribute("href", "#");
newnode.innerHTML = "new item"+i;//此处也可写在调用ajax获取后台数据，用i传页码
document.body.appendChild(newnode);
var newline = document.createElement("br");
document.body.appendChild(newline);
}
}
</script>
</body>
</html>

阅读原文

阅读 2441

123 显示电脑版