以下内容为看JS权威指南相关学习笔记
文档坐标和视口坐标
文档坐标比视口坐标更加基础，并且在用户滚动是不会发生变化。一般来说，要在两种坐标之间相互转换，必须加上或者减去滚动的偏移量。（scroll offset）
"视口"是指实际显示文档内容的浏览器的一部分，它不包括浏览器的外壳（如菜单、工具条和标签页等）
当我们在讨论元素的位置时，必须先弄清楚所使用的坐标是文档坐标还是视口坐标。
视口坐标：我们从上面视口的相关说明中就能明白，指的就是在固定的浏览器视口中的内容。当我们滚动滚动条的时候视口里的内容一直在变化。视口坐标是以浏览器视口的左上角为坐标系的原点。
文档坐标：文档坐标是以文档的初始状态左上角为坐标系的原点。当我们滚动滚动条的时候，文档坐标的X和Y相应的增加。
我的理解：视口坐标就是浏览器的这一个视口，里面的内容随滚动条的滚动而变化，视口一直保持不变。文档坐标就是整个文档的内容，和视口坐标在初始状态时是一样的。
为了在坐标系之间互相转换，我们需要判断浏览器窗口的滚动条的位置。
window对象的pageXOffsets和pageyoffsets IE8以及之前的版本不支持
srcollLeft和scrollTop 所有现代浏览器以及IE均支持
标准兼容模式下的IE 通过查询文档的根节点(document.documentElement)
怪异模式下的IE 通过查询文档的<body>元素(document.body)
document.compatMode
之前很少接触document.compatMode，在这里再学习一下
我们都知道，IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别。
在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场，它有两种可能的返回值：
BackCompat Standards-compliant mode is not switched on. (Quirks Mode) CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
官方解释：
BackCompat：标准兼容模式关闭。
CSS1Compat：标准兼容模式开启。
document.compatMode用来判断当前浏览器采用的渲染方式。
当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。
高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
参考文章：http://www.cnblogs.com/fullhouse/archive/2012/01/17/2324706.html
网友评论