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

当前位置：主页 >> JavaScript >> 正文

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

阅读：2868 输入：2021-11-28 20:48:50

<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>

上一篇：mysql字符串转整型，类型转换函数 CONVERT和CAST
下一篇：PHP输出字母A-Z当超过26个字母时输出AA,AB，用于excel表头

相关阅读: 纯js三组文字定时向上滚动特效代码; 根据滚动条位置来逐渐加载内容js特效; JS判断页面是否出现滚动条