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

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不支持。

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



    
        
        鬼眼邪神的博客
        
        
        
        
    

    
        


你可能感兴趣的:(JS)