先搞offsetTop，最难懂的就是它了
官方解释：返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。这真TM坑爹啊！有木有！经过仔细研究查找得出结论：offsetTop是相对于离它最近的具有绝对或相对定位的父级元素的距离，有点绕口是不是？别急，咱慢慢剥开它...首先一定要明白offsetTop是一个相对值，那它到底是相对于谁的值呢，现在的女明星不都流行找干爹嘛，offsetTop也给自己找了一个，别人的要求是要有钱有权，而它的要求是要有position（只能是relative和absolute，fixed在IE和Opera中无效），并且是父级中离它最近的那一个，挺符合就近原则滴!而offsetY则是一个鼠标事件的值，它是相对于你所点击的那个元素的，它的最小值是0，最大值是所点击元素的高度。在现在大家明白了吧，如果还木有就看这个实例：http://www.quirksmode.org/dom/tests/offset.html
scrollHeight, scrollWidth
返回元素的完整的高度和宽度，以像素为单位。当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性），这些属性和 offsetHeight 与 offsetWidth 不同，offsetHeight 和 offsetWidth 只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。
当你把滚动条滚到底部的时候，scrollHeight = scrollTop + clientHeight；当没有滚动条时scrollHeight = clientHeight，IE则是等于内容的高度；
scrollTop, scrollLeft
设置或返回已经滚动到元素的左边界或上边界的像素数。只有在元素有滚动条的时候，例如，元素的 CSS overflow 属性设置为 auto 的时候，这些像素才有用。这些属性也只在文档的 <body> 或 <html> 标记上定义（这和浏览器有关），并且一起来制定滚动文档的位置。注意，这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性
搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight,布布扣,bubuko.com