实在受不了每次瞎猜的滚动计算了！！！

每次都靠猜的我熬过了许多滚动到底部加载的js也是醉了

关于JavaScript， jQuery中的各种滚动高度计算

Reference from stackoverflow What is offsetHeight, clientHeight, scrollHeight?

里面的回答有一张清晰无比的图。

在JavaScript中

clientHeight: div的真正高度，包括padding，但是不包括滚动条的那一小段高度，no border, no margin.

offsetHeight: 包括border，padding，滚动条，css高度。（隐藏的部分不包括哦）

scrollHeight: 元素的真实高度（包括overflow隐藏的那堆）

scrollHeight > offsetHeight > clientHeight

scrollTop

document.documentElement.scrollTop在Chrome里总为0
document.body.scrollTop 在IE和firefox里总为0
完美的获取scrollTop 赋值简写 ：

var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;

总结

scroll
- scrollHeight: 获取对象的滚动高度。
- scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
- scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
- scrollWidth:获取对象的滚动宽度
- document.documentElement.scrollTop 垂直方向滚动的值
- event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

event
- event.clientX 相对文档的水平座标
- event.clientY 相对文档的垂直座标
- event.offsetX 相对容器的水平坐标
- event.offsetY 相对容器的垂直坐标

网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

获取设备宽高的代码

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

完整链接

jQuery中

outerHeight(true) > outerHeight() > innerHeight() > height()

包括margin > 包括border > 包括padding > element本身高度

document vs window

$(window).height() 表示整个可见窗口的高度

$(document).height()表示整个文档的高度。在resize时，window的高度是在不断变化的。document是文档的实际高度，不会改变，是很大很大的一个值。

$(document).scrollTop() 垂直滚动的距离 ，div到文档顶部的距离

$(document).scrollTop() == 0 // 到达顶端
scrollTop()>=$(document).height()-$(window).height()  到达底端

$(document).scrollLeft() 水平滚动的距离

screen.height;
screen.width;