这里需要注意一个兼容性的问题，在 Chrome 中可以用 document.body.scrollTop 和 window.pageYOffset，IE 7/8 只能通过 document.documentElement.scrollTop 获取， FireFox 和 IE9+ 可以用 document.documentElement.scrollTop 和 window.pageYOffset 获取，Safari 需要 window.pageYOffset 获取。所以这里我们需要做一下浏览器兼容：
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
注意这里的顺序，在 IE7/8 中 window.pageYOffset 是 undefined ，document.body.scrollTop 在任何浏览器中都有，只是不支持的值为 0，如果表达式返回 undefined ，会影响后面的计算操作。而 || 运算符是一个短路取真运算符，所以我们要所有浏览器都有的 document.body.scrollTop 方法放在最后，关于 || 运算符的问题，可以参考 《探寻 JavaScript 逻辑运算符（与、或）的真谛》。
我们在刚才的工具上添加一个方法：
1 var Position = {};
2 (function () {
3 Position.getAbsolute = function (reference, target) {
4 var result = {
5 left: -target.clientLeft,
6 top: -target.clientTop
7 }
8 var node = target;
9 while(node != reference && node != document){
10 result.left = result.left + node.offsetLeft + node.clientLeft;
11 result.top = result.top + node.offsetTop + node.clientTop;
12 node = node.parentNode;
13 }
14 if(isNaN(reference.scrollLeft)){
15 result.right = document.documentElement.scrollWidth - result.left;
16 result.bottom = document.documentElement.scrollHeight - result.top;
17 }else {
18 result.right = reference.scrollWidth - result.left;
19 result.bottom = reference.scrollHeight - result.top;
20 }
21 return result;
22 }
23 Position.getViewport = function (target) {
24 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
25 var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
26 var absolutePosi = this.getAbsolute(document, target);
27 var Viewport = {
28 left: absolutePosi.left - scrollLeft,
29 top: absolutePosi.top - scrollTop,
30 }
31 return Viewport;
32 }
33 })();
通过 Position.getViewport 方法可以获取元素相对于浏览器窗口的定位：
1 Postion.getViewport(targetNode); //{left: left, top: top}
五、判断可视区域在上面的几个方法中，我们可以获取元素的文档流定位和视窗定位，不过这还是不能判断一个元素是否在可视区域内，因为视窗定位可以是非常大的数字，这样元素就在视窗的后面。这里我们需要使用浏览器视窗高度 window.innerHeight 属性，在 IE8 以下需要用 document.documentElement.clientHeight 来获取。
windowHeight = window.innerHeight || document.documentElement.clientHeight;
现在，我们用窗口的高度，减去相对于浏览器窗口的定位，即可获取相对于浏览器窗口右下角的定位；