失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 滚动到底部自动加载 html 移动端页面滚动到底部自动加载数据

滚动到底部自动加载 html 移动端页面滚动到底部自动加载数据

时间:2019-10-12 16:01:40

相关推荐

滚动到底部自动加载 html 移动端页面滚动到底部自动加载数据

$(window).bind("scroll", function () {

if(getScrollHeight() == getDocumentTop() + getWindowHeight()){

//当滚动条到底时,触发内容

//ajax_function()

alert("滑动到的底部");

}

});

//文档高度

function getDocumentTop() {

var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;

if (document.body) {

bodyScrollTop = document.body.scrollTop;

}

if (document.documentElement) {

documentScrollTop = document.documentElement.scrollTop;

}

scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;

console.log("文档高度scrollTop:"+scrollTop);

return scrollTop;

}

//可视窗口高度

function getWindowHeight() {

var windowHeight = 0;

if (patMode == "CSS1Compat") {

windowHeight = document.documentElement.clientHeight;

} else {

windowHeight = document.body.clientHeight;

}

console.log("可视窗口windowHeight:"+windowHeight);

return windowHeight;

}

//滚动条滚动高度

function getScrollHeight() {

var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;

if (document.body) {

bodyScrollHeight = document.body.scrollHeight;

}

if (document.documentElement) {

documentScrollHeight = document.documentElement.scrollHeight;

}

scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;

console.log("滚动高度scrollHeight:"+scrollHeight);

return scrollHeight;

}

如果觉得《滚动到底部自动加载 html 移动端页面滚动到底部自动加载数据》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。