DOCTYPE引发的scrollTop赋值为0的问题

    因为项目的需要，需要获取鼠标的坐标，但是因为浏览器带有滚动条，所以在处理时碰到了难题。firefox的获取很简单，网上都有相应的介绍，x = event.pageX;  y =event.pageY;   我碰到的难题主要是针对ie，大家都知道，可以用eevent.clientX + document.body.scrollLeft;event.clientY + document.body.scrollTop;获取坐标，但是我测试时，获取的 document.body.scrollTop=0，这意味着对于我的页面来说，document.body.scrollTop并不起作用，上网查了下，知道了原因，现分享给大家：

DOCTYPE引发的scrollTop赋值为0的问题

在编写页面滚动特效的时候，为了做层跟随屏幕滚动移动或者固定层的垂直屏幕位置，都会用到document.XXX.scrollTop属性，然而页面是否声明DOCTYPE关系到该属性能否成功的关键。

当有DOCTYPE声明的时候，需要用document.documentElement.scrollTop方法来获取滚动条高度。
当没有声明的时候，用document.body.scrollTop方法。

为了兼顾这两种情况，最简单的办法就是做一个兼容性的判断。

var  TureScrollTop;
// 详细的写法
if (document.documentElement  &&  document.documentElement.scrollTop) {
  TureScrollTop = document.documentElement.scrollTop;
} else   if (document.body) {
  TureScrollTop = document.body.scrollTop;
}

// 简明写法
if (document.body.scrollTop) {
  TureScrollTop = document.body.scrollTop;
} else {
  TureScrollTop = document.documentElement.scrollTop
}

 

通常情况下，用这两种的任一种就能满足需要，如果需要更严谨的方法，则可以用下面的代码(以下部分转载于www.cssrain.cn)：

var  scrollPos; 
if  ( typeof  window.pageYOffset  !=   ' undefined ' )  { 
    scrollPos = window.pageYOffset; 
}  
else   if  ( typeof  document.compatMode  !=   ' undefined '   &&  document.compatMode  !=   ' BackCompat ' )  { 
    scrollPos = document.documentElement.scrollTop; 
}  
else   if  ( typeof  document.body  !=   ' undefined ' )  { 
    scrollPos = document.body.scrollTop; 
}

 

程序解释：
解释1：
document.body.scrollTop:就是滚动条顶部到网页顶部的这段距离
window.pageYOffset是NS专用属性，它的含义和IE下的document.body.scrollTop一样 。

解释2:
当文档有了标准声明时， document.compatMode 的值就等于 "CSS1compat"，当没声明的时候， document.compatMode 的值等于 "BackCompat"，所以想判断文档是否有声明，可以这么写：
if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){...}

解释3:
当文档没有声明的时候，可以用document.body.scrollTop;来获取滚动条高度。