Javascript 窗口的几何关系和相关方法、属性
Window Geometry
窗口几何关系
Screen坐标系是描述浏览器窗口和桌面之间的几何关系的，其坐标是相对于桌面左上角的。
Window坐标系描述了浏览器页面可视区域的几何关系，其坐标是相对于可视区域的左上角。
Document坐标系描述了HTML元素与document文档的几何关系，其坐标是相对于document对象的左上角的。
当document足够长而产生滚动条，document坐标系和window坐标系就会产生差异，两个坐标系之间就要考虑转换的方法。
IE在默认状态下将这些相关属性放在document.body下，但如果有<!DOCTYPE>声明，那么就会放在document.documentElement下。
以下是一个获取几何参数的函数
窗口几何关系
引用
Screen coordinates describe the position of a browser window on the desktop; they are measured relative to the upper-left corner of the desktop.
Screen坐标系是描述浏览器窗口和桌面之间的几何关系的，其坐标是相对于桌面左上角的。
引用
Window coordinates describe a position within the web browser's viewport; they are measured relative to the upper-left corner of the viewport.
Window坐标系描述了浏览器页面可视区域的几何关系，其坐标是相对于可视区域的左上角。
引用
Document coordinates describe a position within an HTML document; they are measured relative to the upper-left corner of the document. When the document is longer or wider than the viewport (as web pages often are), document coordinates and window coordinates are not the same, and you'll need to take the position of the scrollbars into account when converting between these two coordinate systems.
Document坐标系描述了HTML元素与document文档的几何关系，其坐标是相对于document对象的左上角的。
当document足够长而产生滚动条，document坐标系和window坐标系就会产生差异，两个坐标系之间就要考虑转换的方法。
引用
For some reason, IE places these window geometry properties on the <body> of the HTML document. And, further confusing matters, IE 6, when displaying a document with a <!DOCTYPE> declaration, places the properties on the document.documentElement element instead of document.body.
IE在默认状态下将这些相关属性放在document.body下，但如果有<!DOCTYPE>声明，那么就会放在document.documentElement下。
| 浏览器 | window对象坐标大小 | 可视区域大小 | 滚动条 | document对象坐标大小 |
| FF | screenX/Y | innerWidth/Height | pageXOffset/YOffset | documentElement.scrollLeft/Top |
| IE with doctype | screenLeft/Top | documentElement.clientWidth | documentElement.scrollLeft/Top/Height | documentElement.scrollLeft/Top |
以下是一个获取几何参数的函数
/**
* Geometry.js: portable functions for querying window and document geometry
*
* This module defines functions for querying window and document geometry.
*
* getWindowX/Y( ): return the position of the window on the screen
* getViewportWidth/Height( ): return the size of the browser viewport area
* getDocumentWidth/Height( ): return the size of the document
* getHorizontalScroll( ): return the position of the horizontal scrollbar
* getVerticalScroll( ): return the position of the vertical scrollbar
*
* Note that there is no portable way to query the overall size of the
* browser window, so there are no getWindowWidth/Height( ) functions.
*
* IMPORTANT: This module must be included in the <body> of a document
* instead of the <head> of the document.
*/
var Geometry = {};
if (window.screenLeft) { // IE and others
Geometry.getWindowX = function( ) { return window.screenLeft; };
Geometry.getWindowY = function( ) { return window.screenTop; };
}
else if (window.screenX) { // Firefox and others
Geometry.getWindowX = function( ) { return window.screenX; };
Geometry.getWindowY = function( ) { return window.screenY; };
}
if (window.innerWidth) { // All browsers but IE
Geometry.getViewportWidth = function( ) { return window.innerWidth; };
Geometry.getViewportHeight = function( ) { return window.innerHeight; };
Geometry.getHorizontalScroll = function( ) { return window.pageXOffset; };
Geometry.getVerticalScroll = function( ) { return window.pageYOffset; };
}
else if (document.documentElement && document.documentElement.clientWidth) {
// These functions are for IE 6 when there is a DOCTYPE
Geometry.getViewportWidth =
function( ) { return document.documentElement.clientWidth; };
Geometry.getViewportHeight =
function( ) { return document.documentElement.clientHeight; };
Geometry.getHorizontalScroll =
function( ) { return document.documentElement.scrollLeft; };
Geometry.getVerticalScroll =
function( ) { return document.documentElement.scrollTop; };
}
else if (document.body.clientWidth) {
// These are for IE4, IE5, and IE6 without a DOCTYPE
Geometry.getViewportWidth =
function( ) { return document.body.clientWidth; };
Geometry.getViewportHeight =
function( ) { return document.body.clientHeight; };
Geometry.getHorizontalScroll =
function( ) { return document.body.scrollLeft; };
Geometry.getVerticalScroll =
function( ) { return document.body.scrollTop; };
}
// These functions return the size of the document. They are not window
// related, but they are useful to have here anyway.
if (document.documentElement && document.documentElemnet.scrollWidth) {
Geometry.getDocumentWidth =
function( ) { return document.documentElement.scrollWidth; };
Geometry.getDocumentHeight =
function( ) { return document.documentElement.scrollHeight; };
}
else if (document.body.scrollWidth) {
Geometry.getDocumentWidth =
function( ) { return document.body.scrollWidth; };
Geometry.getDocumentHeight =
function( ) { return document.body.scrollHeight; };
}