查询窗口滚动条的位置和视口尺寸

元素的位置是以像素来度量的，有两个不同的点作为坐标系的原点：

1. 文档的左上角
2. 在其中显示文档的视口的左上角

在顶级窗口和标签页中，视口只是实际显示文档内容的浏览器的一部分：他不包括浏览器的“外壳”（如菜单、工具栏和标签页）。针对框架页中显示的文档，视口是定义了框架页的<iframe>元素。
无论在何种情况下，当讨论元素的位置时，必须弄清楚所使用的坐标是文档坐标还是视口坐标（或者是窗口坐标）。

查询窗口的滚动条位置

先使用比较新的属性scrollingElement：scrollingElement （ Document 的只读属性）返回滚动文档的 Element 对象的引用。 在标准模式下, 这是文档的根元素, document.documentElement。当在怪异模式下， scrollingElement 属性返回 HTML body 元素（若不存在返回 null ）。

// 查询窗口的滚动条位置
function getScroll(w){
    w = w || window;
    var d = w.document;
    var scrollingElement = d.scrollingElement;
    return {
        x: scrollingElement.scrollLeft,
        y: scrollingElement.scrollTop
    }
}

或者是window对象的pageXOffset和pageYOffset属性（IE8及以下不兼容）：

// 查询窗口的滚动条位置
function getScroll(w){
    w = w || window;
    return {
        x: w.pageXOffset,
        y: w.pageYOffset
    };
}

但是我们有时也要考虑浏览器的兼容性：

// 查询窗口的滚动条位置
function getScrollOffsets(w){
    w = w || window;
    // 除了IE8及以下版本，其他浏览器使用
    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;
    // 除了IE8及以下版本，其他浏览器使用
    if(w.innerWidth != null){
        return {
            w: w.innerWidth,
            h: w.innerHeight
        };
    }
    // 对标准模式下的IE（或任何浏览器）
    var d = w.document;
    if(document.compatMode == "CSS1Compat"){
        return {
            w: d.documentElement.clientWidth,
            h: d.documentElement.clientHeight
        };
    }
    // 怪异模式下的浏览器
    return {
        w: d.body.clientWidth,
        h: d.body.clientHeight
    };
}

不过innerWidth/innerHeight和clientWidth/clientHeight的返回结果是不同的，先看一张图

从图中可以看出两者的差距就在于当有滚动条的时候，innerWidth/innerHeight包括滚动条的宽度，而clientWidth/clientHeight不包括滚动条的宽度。