DOM元素Window关于宽高、screen、scroll相关属

一、前言

了解或者熟悉 window 对象的关于宽高、screen、scroll相关属性，我们在进行自定义控件或者进行绘制的实现时候，是比较重要的参考参数。有些参数名字相近或者相似，比较难区分。因此，非常有必要来梳理一下。

二、DOM 之 Window

宽高，scroll，screen 相关的属性如下。

DOM之Window.jpg

2.1 宽高

宽高的属性
innerWidth、innerHeight: 窗口的宽高，可以理解为实际的画布宽高，包括可滚动的宽高以及滚动条所占的宽高。

outerWidth、outerHeight: 通常指页面所在浏览器的宽高。

下图说明了它们的区别。

宽高.jpg

2.2 scroll

scroll 用来表示window 的滑动位置。通俗点讲，这个是依据屏幕坐标系，也就是左上角为原点 O(0,0) 来说的。所以滑动位置说简单点就是内容滑出浏览器内容区的长度。

scrollX: 就是内容向左滑出的长度。pageXOffset 是它的别名，值一样的。
scrollY: 就是内容向上滑出的长度。pageYOffset 是它的别名，值一样的。

scroll.jpg

2.3 screen

screen 里面就是封装了浏览器所在屏幕的规格，而 window 里面也有一些相关属性：

screenX、screenY: 浏览器左上角在屏幕坐标系上的坐值。screenLeft 和 screenTop 是它的别名，当然也更说明了它的含义。

screen.jpg