移动端wap站下拉加载更多

最新推荐文章于 2021-03-17 13:50:43 发布

转载最新推荐文章于 2021-03-17 13:50:43 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/-jia/p/7569844.html

本文介绍了一种在网页中实现滚动到底部自动加载更多内容的技术方案。通过JavaScript监测滚动条位置，当接近页面底部时触发加载新内容的AJAX请求。文章提供了具体的实现代码，包括获取滚动条位置、可视区域高度及文档总高度的方法。

//获取滚动条当前的位置
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);
}
window.onscroll = function () {

　　//距离底部距离50px的时候加载
if (getScrollTop() + getClientHeight() >= (getScrollHeight()-50) ) {
//ajax从这里开始
comment.loadMoreCommentInOrder(window.commentTime);
}
}

转载于:https://www.cnblogs.com/-jia/p/7569844.html