js实现移动HTML5页面滑动到最底部触发内容加载

首先要清楚3个定义:

1. 文档高度

   这是整个页面的高度

2. 可视窗口高度

   这是你看到的浏览器可视屏幕高度

3. 滚动条滚动高度

   滚动条下滑过的高度

 

所以, 当 文档高度 = 可视窗口高度 + 滚动条高度  时,滚动条正好到底.

 

那我们就来定义三个不同的方法,分别获取上面3个高度值

01

//文档高度

02	function getDocumentTop() {

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

04	if (document.body) {

05	bodyScrollTop = document.body.scrollTop;

06

}

07	if (document.documentElement) {

08	documentScrollTop = document.documentElement.scrollTop;

09

}

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

11

}

12

13

//可视窗口高度

14	function getWindowHeight() {

15	var windowHeight = 0;    if (document.compatMode == "CSS1Compat") {

16	windowHeight = document.documentElement.clientHeight;

17

} else {

18	windowHeight = document.body.clientHeight;

19

}

20	return windowHeight;

21

}

22

23

//滚动条滚动高度

24	function getScrollHeight() {

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

26	if (document.body) {

27	bodyScrollHeight = document.body.scrollHeight;

28

}

29	if (document.documentElement) {

30	documentScrollHeight = document.documentElement.scrollHeight;

31

}

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

33

}

 

下面我们需要一个监听滚动条的事件

1	window.onscroll = function () {    //监听事件内容}

 

当滚动条移动马上就出发我们上面定义的事件触发函数,但是我们要求的是滚动条到底后才触发,所以自然这个触发事件里面需要逻辑控制一下.

view source

print ?

1	window.onscroll = function () {

2

//监听事件内容

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

4	//当滚动条到底时,这里是触发内容

5	//异步请求数据,局部刷新dom

6	ajax_function()

7

}

8

}