JS：window对象的pageXOffset、innerWidth、outerWidth、screenLeft、screenX

最新推荐文章于 2025-07-07 10:19:46 发布

原创最新推荐文章于 2025-07-07 10:19:46 发布 · 5.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#pageXOffset #innerWidth #outerWidth #screenLeft #screenX

JS 专栏收录该内容

22 篇文章

订阅专栏

window.pageXOffset

获取页面文档向右滚动过的像素数。

window.pageYOffset

获取页面文档向下滚动过的像素数。

浏览器兼容性

IE7、8不支持，可以使用document.documentELement.scrollLeft/scrollTop来代替。

window.innerWidth

设置或获取浏览器窗口文档显示区域的宽度，包括滚动条。

window.innerHeight

设置或获取浏览器窗口文档显示区域的高度，包括滚动条。

浏览器兼容性

IE7、8不支持。

window.outerWidth

设置或获取浏览器窗口的外部宽度。

window.outerHeight

设置或获取浏览器窗口的外部高度。

浏览器兼容性

在Chrome和Opera中，当浏览器窗口全屏化时，outerWidth和outerHeight指的是可以看到的浏览器部分所占据的空间。
在FireFox、Safari、IE9和IE10中，当浏览器窗口全屏化时，outerWidth和outerHeight指的不仅是可以看到的浏览器所占据的空间，还包括其未显示部分。当浏览器窗口退出全屏化时，其四周会有8px的边框。而当浏览器窗口全屏化时，边框虽然未被显示，但仍然是计算在outerWidth和outerHeight内。
IE7、8不支持。

window.screenLeft

设置或获取浏览器窗口左上角相对于屏幕左上角的x坐标。

window.screenTop

设置或获取浏览器窗口左上角相对于屏幕左上角的y坐标。

浏览器兼容性

在Chrome和Opera中，当浏览器窗口全屏化时，screenLeft和screenTop指的是可见的浏览器部分与屏幕左上角的距离，两者的值都为0。
在Safari中，当浏览器窗口全屏化时，screenLeft和screenTop指的是整个浏览器与屏幕左上角的距离，因为在全屏化的时候浏览器窗口边缘8px的边框不显示，但依然会计算在内，所以screenLeft和screenTop的值是（-8，-8）。
FireFox不支持。
在IE中，screenLeft和screenTop指的是浏览器窗口文档显示区域的左上角相对于屏幕左上角的位置。

window.screenX

设置或获取浏览器窗口左上角相对于屏幕左上角的x坐标。

window.screenY

设置或获取浏览器窗口左上角相对于屏幕左上角的y坐标。

浏览器兼容性

在Chrome、Opera和Safari中，screenX和screenY与screenLeft和screenTop所起的作用是一样的，所得数值一样。
在FireFox、IE9和IE10中，当浏览器窗口全屏化时，screenX和screenY指的是整个浏览器与屏幕左上角的距离，因为在全屏化的时候浏览器窗口边缘8px的边框不显示，但依然会计算在内，所以screenLeft和screenTop的值是（-8，-8）。
IE7、8不支持。

本文所用的测试代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>鬼眼邪神的博客</title>
        <meta name="author" content="鬼眼邪神"/>
        <meta name="description" content="鬼眼邪神的博客，http://blog.youkuaiyun.com/u010200222"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            html {
                margin:20px;
                padding:20px;
                width:600px;
                border:10px solid #000;
            }
            body {
                margin:0 0 0 100px;
                width:400px;
                height:800px;
                border:5px solid #000;
                background:yellow;
                overflow:scroll;
            }
            .green {
                position:relative;
                margin:50px auto;
                padding:20px;
                width:80px;
                height:80px;
                border:10px solid #000;
                background:rgb(0,255,0);
            }
            .con {
                margin:0 auto;
                width:380px;
            }
        </style>
        <script>
            (function(){
                window.onload=function (){
                    var con=document.getElementById("con");
                    var green=document.getElementById("green");
                    var body=document.getElementById("body");
                    document.onclick=function (event){
                        var event=window.event||event;
                        con.innerHTML=
                            "window.pageXOffset="+window.pageXOffset+"，"+
                            "window.pageYOffset="+window.pageYOffset+"<br/>"+
                            "window.innerWidth="+window.innerWidth+"，"+
                            "window.innerHeight="+window.innerHeight+"<br/>"+
                            "window.outerWidth="+window.outerWidth+"，"+
                            "window.outerHeight="+window.outerHeight+"<br/>"+
                            "window.screenLeft="+window.screenLeft+"，"+
                            "window.screenTop="+window.screenTop+"<br/>"+
                            "window.screenX="+window.screenX+"，"+
                            "window.screenY="+window.screenY+"<br/>";
                    }
                }
            })();
        </script>
    </head>

    <body>
        <div class="green" id="green">
            <div class="red"></div>
        </div>
        <div class="con" id="con"></div>
    </body>
</html>