JavaScript中获取滚动坐标与定位固定层的兼容方案

XHTML标准下获取滚动坐标的兼容方案

为了更灵活地设置目标层的坐标，通常需要获取HTML元素的坐标信息。虽然可以使用document.body.scrollTop等属性，但在包含<!DOCTYPE...>声明的XHTML标准网页中，这些属性返回的值通常为0；若移除该声明则能正常获取。那么在遵循XHTML标准时，应如何正确获取body的坐标呢？解决方法是使用document.documentElement来替代document.body，具体写法如下。

 
var top=document.documentElement.scrollTop ||document.body.scroolTop;

JavaScript中的||运算符不仅可用于if条件判断，还可用于变量赋值。上述示例可改写为以下格式：

 
var top=document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop;

这种写法具备较好的浏览器兼容性。需要注意的是，如果不显式设置document.documentElement.scrollTop的值，其显示结果可能为0。

关键属性区别与说明

说明

document.documentElement.scrollTop

而不是用

document.body.scrollTop;

document.documentElement获取的是html标签，

在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;

鼠标定位与IE兼容性处理

如果我们要定位鼠标相对于页面的绝对位置时，搜索引擎中常见的建议是使用

event.clientX+document.body.scrollLeft ,event.clientY+document.body.scrollTop;

如果发现鼠标位置与预期不符，这可能是因为IE5.5之后不再支持document.body.scrollX对象。

因此我们需要增加以下判断逻辑：

 
if (document.body && document.body.scrollTop &&document.body.scrollLeft)
{ 
top=document.body.scrollTop;
left=document.body.scrollleft;
} 
if (document.documentElement && document.documentElement.scrollTop&& document.documentElement.scrollLeft)
{ 
top=document.documentElement.scrollTop;
left=document.documentElement.scrollLeft;
} 

常用DOM尺寸与事件坐标属性列表

下面介绍一些参数的用法：

网页的可见区域宽度：document.body.clientWidth;

网页的可见区域高度：document.body.clientHeight;

网页可见区域宽:document.body.offsetWidth;(包括边线的宽);

网页可见区域高：document.body.offsetHeight;(包括边线的宽);

网页正文全文宽：document.body.scrollWidth;

网页正文全文高：document.body.scrollHeight;

网页被卷去的高：document.body.scrollTop;

网页被卷去的左：document.body.scrollLeft;

网页正文部分上:windows.screenTop;

网页正文部分左：windows.screenLeft;

屏幕分辨率的高：windows.screen.height;

屏幕分辨率的宽：windows.screen.widht;

屏幕可用工作区高度：windows.screen.availHeight;

屏幕可用工作区宽度：windows.screen.availWidth;

获取对象的滚动高度：scrollHeight;

设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 :scrollLeft;

设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 :scrollTop;

获取对象的滚动宽度:scrollWidth；

获取对象相对于版面或由父坐标：offsetParent 属性指定的父坐标的高度 ：offsetHeight;

获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置 :offsetLeft;

获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置:offsetTop;

event.clientX:相对于文档的水平坐标；

event.clientY:相对于文档的垂直坐标；

event.offsetX:相对于容器的水平坐标；

event.offsetY：相对于容器的垂直坐标；

document.documentElement.scrollTop:设置滚动的垂直高度

event.clientX + document.documentElement.scrollTop:相对文档的水平位置+垂直方向的滚动量；