scrollTop、offsetHeight、offsetTop、 clientHeight等属性用法详解

下面有每个属性详细的解释
网页可见区域宽：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

一.offsetTop属性:

此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。 返回值是一个整数，单位是像素。 此属性是只读的。

二.offsetLeft属性:

此属性和offsetTop的原理是一样的，只不过方位不同

三.offsetWidth属性:

此属性可以获取元素的宽度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。 返回值是一个整数，单位是像素。 此属性是只读的。

四.offsetHeight属性:

此属性可以获取元素的高度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。 返回值是一个整数，单位是像素。 此属性是只读的。

五.clientWidth属性:

此属性可以返回一个元素的宽度值，值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。 返回值是一个整数，单位是像素。 此属性是只读的。

六.clientHeight属性:

此属性可以返回一个元素的高度值，值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。 返回值是一个整数，单位是像素。 此属性是只读的。

七.scrollLeft属性:

此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。 返回值是一个整数，单位是像素。 此属性是可读写的。

八.scrollTop属性:

滚动条到顶部的垂直高度 (即网页被卷上去的高度) 此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。 返回值是一个整数，单位是像素。 此属性是可读写的。

九.scrollHeight属性:

此属性获取对象的实际尺寸。

document.body.scrollTop与document.documentElement.scrollTop兼容
1.各浏览器下 scrollTop的差异:

IE6/7/8：
可以使用 document.documentElement.scrollTop；
IE9及以上：
可以使用window.pageYOffset或者document.documentElement.scrollTop
Safari:
safari： window.pageYOffset 与document.body.scrollTop都可以；
Firefox:
火狐等等相对标准些的浏览器就省心多了，直接用window.pageYOffset 或者 document.documentElement.scrollTop ；
Chrome：
谷歌浏览器只认识document.body.scrollTop;
注：标准浏览器是只认识documentElement.scrollTop的，但chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop.
由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值，那到底网页的scrollTop值怎么得到呢？难道又要用JavaScript进行判断？

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，如果不考虑safari，可以这样：
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。

但最好的兼容写法是：var heightTop = document.documentElement.scrollTop || document.body.scrollTop;

2.获取scrollTop的值

pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

这些属性是只读的。

所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。

注意： IE8及更早IE版本不支持该属性,但可以使用 “document.documentElement.scrollLeft” 和 “document.documentElement.scrollTop” 属性 。

由于谷歌兼容问题，可以使用document.body.scrollLeft和document.body.scrollTop 或者window.pageXoffset与window.pageYoffset

scrollTop 滚动条相对于其顶部的偏移
offsetTop 返回当前元素上边缘距离offsetParent元素的距离，返回值是数字，单位是像素。
offsetHeight 返回当前元素的高度，包括内边距和边框
event.clientX，event.clientY 相对于浏览器窗口的(x,,y)坐标，不包括工具栏和滚动条
event.pageX， event.pageY 相对于文档的(x,,y)坐标