首先要清楚3个定义:
文档高度
这是整个页面的高度
可视窗口高度
这是你看到的浏览器可视屏幕高度
滚动条滚动高度
滚动条下滑过的高度
所以, 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底.
那我们就来定义三个不同的方法,分别获取上面3个高度值
//文档高度
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;
return
scrollTop;
11
}
//可视窗口高度
function
getWindowHeight() {
var
windowHeight
=
0;
if (document.
compatMode
==
"CSS1Compat") {
windowHeight
= document.documentElement.
clientHeight;
}
else {
windowHeight
= document.body.
clientHeight;
}
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;
return
scrollHeight;
}
//下面我们需要一个监听滚动条的事件
window.
onscroll
=
function () {
//当滚动条移动马上就出发我们上面定义的事件触发函数,但是我们要求的是滚动条到底后才触发,所以自然这个触发事件里面需要逻辑控制一下.
if(
getScrollHeight()
==
getWindowHeight()
+
getDocumentTop()){
ajax_function
()
}
}