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

1、前言

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

2、DOM 之 Window

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

2.1 宽高

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

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

下图说明了它们的区别。

2.2 scroll

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

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

2.3 screen

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

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