视口相关

以下内容为看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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,558评论 1 90
  • 本文整理自《高级javascript程序设计》 DOM(文档对象模型)是针对HTML和XML文档的一个API(应用...
    SuperSnail阅读 191评论 0 1
  • 简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输...
    wengjq阅读 1,131评论 2 13
  • 大家好,我是IT修真院深圳分院第01期学员,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 CSS任...
    长天_阅读 6,105评论 0 3
  • 昨天单位人事部招了两个职员,不知道是世界小还是缘分,招聘来的两个女孩子不仅是同一所重点大学,甚至两者所学的专业都很...
    淑男淑女阅读 203评论 8 3