JS中文档坐标和视口坐标整理记录

　　当我们在讨论元素的位置时，必须要理清楚所使用的是文档坐标还是视口坐标。

　　如果窗口没有滚动条或者文档比视口要小的时候，文档和视口的坐标系统是同一个。

　　但是一般来讲两种坐标的转换必须加上或者减去偏移量，例如一个元素N的视口坐标为(120,400),切滚动条从(0,0)移动到了(0,200).那么此时元素N的文档坐标就为(120,600).

　　下面分别说明如何查询窗口滚动条的位置及视口的尺寸大小。

1.查询滚动条的位置

var doc=document,docElem=doc.documentElement,docBody=doc.body;
var scroll_left=docElem.scrollLeff ||docBody.scrollLeft || 0;//标准浏览器 || 怪异模式浏览器
var scroll_top=docElem.scrollTop||docBody.scrollTop || 0;

2.查询视口的尺寸大小

var viewport_width=docElem.clientWidth ||docBody.clientWidth || 0;
var viewport_heigth=docElem.clientHeight ||docBody.clientHeight || 0;

下面几个值也比较常见：

1)文档的高度/宽度   docElem.offsetHeight   docElem.offsetWidth

以后再讨论元素的尺寸和位置