dom 滚动条位置 视口尺寸学习记录

左上角为文档  视口  css指定坐标为文档坐标  事件为视口坐标

浏览器滚动条位置 除IE8以下为window对象的pageXoffset pageYoffset ,IE 和 现在浏览器可以使用scrollTop scrollLeft。但是正常情况下使用document.documentElement,但是在怪异模式下 使用 document.body

// 获取滚动条的位置

 function getScrollOffset(w){

   //使用指定的窗口，如果不带参数则使用当前窗口

  w = w || window;

 //出了IE 8 及更早的版本以外,其他浏览器通用

 if(w.pageXOffset !=null) return {x:w.pageXOffset,y:w.pageYOffset};

 //对标准模式下的IE（或任何浏览器)

 var d = w.document;

if(document.compatMode == "CSS1Compat")

  return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};

 // 对怪异模式下的浏览器

return {x:d.body.scrollLeft,y:d.body.scrollTop};

}

 

// 获取视口的尺寸

 function getViewportSize(w){

   //使用指定的窗口，如果不带参数则使用当前窗口

  w = w || window;

 //出了IE 8 及更早的版本以外,其他浏览器通用

 if(w.innerWidth !=null) return {x:w.innerWidth,y:w.innerHeight};

 //对标准模式下的IE（或任何浏览器)

 var d = w.document;

if(document.compatMode == "CSS1Compat")

  return {x:d.documentElement.clientWidth,y:d.documentElement.clientHeight};

 // 对怪异模式下的浏览器

return {x:d.body.clientWidth,y:d.body.clientHeight};

}