首先要清楚3个定义:
-
文档高度
这是整个页面的高度
-
可视窗口高度
这是你看到的浏览器可视屏幕高度
-
滚动条滚动高度
滚动条下滑过的高度
所以, 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底.
那我们就来定义三个不同的方法,分别获取上面3个高度值
02 | function getDocumentTop() { |
03 | var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; |
05 | bodyScrollTop = document.body.scrollTop; |
07 | if (document.documentElement) { |
08 | documentScrollTop = document.documentElement.scrollTop; |
10 | scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop; |
14 | function getWindowHeight() { |
15 | var windowHeight = 0; if (document.compatMode == "CSS1Compat" ) { |
16 | windowHeight = document.documentElement.clientHeight; |
18 | windowHeight = document.body.clientHeight; |
24 | function getScrollHeight() { |
25 | var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; |
27 | bodyScrollHeight = document.body.scrollHeight; |
29 | if (document.documentElement) { |
30 | documentScrollHeight = document.documentElement.scrollHeight; |
32 | scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; return scrollHeight; |
下面我们需要一个监听滚动条的事件
1 | window.onscroll = function () { |
当滚动条移动马上就出发我们上面定义的事件触发函数,但是我们要求的是滚动条到底后才触发,所以自然这个触发事件里面需要逻辑控制一下.
1 | window.onscroll = function () { |
3 | if (getScrollHeight() == getWindowHeight() + getDocumentTop()){ |