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

骑猪看日落 2022-05-23 20:17 207阅读 0赞

> 元素的位置是以像素来度量的，有两个不同的点作为坐标系的原点：
> 
> 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][innerWidth_innerHeight_clientWidth_clientHeight]

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

[innerWidth_innerHeight_clientWidth_clientHeight]: /images/20220524/7ed5b95002e64bf0bfcc476e1c7b1998.png